JavaScript "自"运行-setInertval()和setTimeout()理解
setInterval()和clearInterval()
setInterval()在JS知识导图上属于 JS的 Windows对象方法, 参考www.w3school.com.cn 与我们最常用的alert()方法是"平行"的, 由于Window对象是浏览器全局对象,所以按照JS的编程习惯,window可以不用coding
var result = "Y";
function onOk()
{
var tid = setInterval(function () {
if (result == "Y")
{
window.location.href=window.location.href;
clearInterval(tid);
}
result = "N";
}, 3000);
}
//当点击一按钮3秒后,利用setInterval()方法刷新页面
setTimeout()和clearTimeout()
<div class="divSpace" style="text-align: center;">
<input type="submit" name="ctl00$ContentPlaceHolder1$bt" value="下一步" id="ContentPlaceHolder1_bt" class="btnSubmitYellow" />
</div> <script language="javascript" type="text/javascript">
var time = 10;
var timeout = null; //用于指引自运行的function的句柄,这里是window.setTimeout(enable_button, 1000);
function enable_button() {
var bt = document.getElementById("ctl00$ContentPlaceHolder1$bt");
if (time > 0) {
bt.value = '还剩余' + time + '秒';
bt.disabled = "true";
time = time - 1;
timeout = window.setTimeout(enable_button, 1000);
}
else {
bt.value = '开始测试';
bt.disabled = "";
window.clearTimeout(timeout);
}
} function window.onload() {
enable_button();
}
</script>
//倒计时实例
setTimeout()定义
1).它属于JS原生范畴, 和JS的Window(浏览器对象)等平行,参考
2).属于JavaScript计时器,让我们有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。
setTimeout和setInterval的区别你真的了解吗? 这篇文章以理解性翻译的形式讲解了setInterval()函数的意义,需要花些时间思考加以理解其中的意味.
Javascript程序都是以单线程的方式运行于浏览器的javascript引擎中的, setTimeout和setInterval的作用只是把我们要执行的代码在我们设定的一个时间点插入js引擎维护的一个代码执行队列中, 时间点待插入的代码不意味着一到时间点就会被立即插入,接着立即执行的,理解这一点很重要.
function click() {
// code block1...
setTimeout(function() {
// process ...
}, 200);
// code block2
}
3).当点击click事件, JS引擎开始执行code block1,执行setTime,接着执行code block2,到200m后,准备将process插入JS执行队列,如code block2执行超过200ms,按照文章的解释, setTime是不会将process过程插入到JS执行队列,必须等到click处理结束在执行process.
4).原生的setTime是没有循环执行的"味道"的,如果需要让setTime变成循环执行,需要自递归调用.
5).原生的setInterval是有循环执行的"味道"的,即每隔多少时间间隔,会将执行代码插入JS执行队列, 但是会发生会插入执行被打断的情况,在setTime一文中给了解释.
JavaScript "自"运行-setInertval()和setTimeout()理解的更多相关文章
- javascript的运行过程以及setTimeout的运行机制
关于javascript的运行机制大家都应该有所了解了吧,其实javascript是一个单线程的机制,但是因为队列的关系它的表现会让我们感觉是一个多线程的错觉.javascript在运行的时候是这样的 ...
- JavaScript自运行函数(function(){})()的理解
今天打开JQuery源文件(jquery-1.8.3), 看到JQuery的初始化过程是这样的 (function( window, undefined ) { // .... })( window ...
- JavaScript运行机制与setTimeout
前段时间,老板交给了我一个任务:通过setTimeout来延后网站某些复杂资源的请求.正好借此机会,将JavaScript运行机制和setTimeout重新认真思考一遍,并将我对它们的理解整理如下. ...
- 理解JavaScript的运行
JavaScript可以运行在head和body标签中! HTML的脚本必须放在<script></script>标签中间! 浏览器会解释并执行位于script标签中的脚本! ...
- 简述JavaScript的运行机制
想要理解JavaScript的运行机制,需要分别深刻理解以下几个点: · JavaScript的单线程机制 · 任务队列(同步任务和异步任务) · 事件和回调函数 · 定时器 · Event Loop ...
- javascript引擎执行的过程的理解--执行阶段
一.概述 同步更新sau交流学习社区(nodeJSBlog):javascript引擎执行的过程的理解--执行阶段 js引擎执行过程主要分为三个阶段,分别是语法分析,预编译和执行阶段,上篇文章我们介绍 ...
- 浅谈javascript的运行机制
积累一下这几天学的,记录一下: 一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程 ...
- 《Secrets of the JavaScript Ninja》:JavaScript 之运行时代码
最近,在阅读 jQuery 之父 John Resig 力作:Secrets of the JavaScript Ninja(JavaScript忍者秘籍).关于第九章提及的 JavaScript 之 ...
- js对象详解(JavaScript对象深度剖析,深度理解js对象)
js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...
随机推荐
- vuejs mvvm图解
- down的另一种用法
- C#.NET 大型企业信息化系统集成快速开发平台 4.2 版本 - 适合大型企业信息化应用使用的角色权限管理体系
每个人外表看看都没什么大区别.但是内在的知识.处理问题的能力.解决问题的能力.头脑灵活性都会有很大的差距.软件组件也是一样,有些组件编写厉害,想问题深入,能处理的难题也多,构思巧妙. 通用快速开发平台 ...
- 软件工程导论-目录-K-T+RJ大
目录 10 第1章 软件工程学概述/1 19 1.1 软件危机/1 19 1.1.1 软件危机的介绍/1 19 1.1.2 产生软件危机的原因/3 21 1.1.3 消除软件危机的途径/4 22 1. ...
- 发布一个免费开源软件-- PAD流程图绘制软件PADFlowChart
软件的可执行文件下载:PADFlowChart-exe.zip MD5校验码:91FCA9FEC9665FD09BEB3DA94ADC1CE6 SHA1校验码:ECD742AA3092A085AB07 ...
- JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)
前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
- CSS基本知识3-CSS盒模型
box-sizing: content-box|border-box|inherit; 值 描述 content-box 这是由 CSS2.1 规定的宽度高度行为. 宽度和高度分别应用到元素的内容框. ...
- 备忘:spring jdbc事务代码 mybatis, nhibernate
http://files.cnblogs.com/files/mikelij/mymavenMar1.rar
- 关于解决asp.net mvc网站页面Banner图片即时更换css里背景图片url相对路径问题的新方案
最近在网站首页上想将Banner壁纸给做到后台上传随时更改的效果.遇到问题便是:将上传的图片路径动态添加到首页css代码中,结果尝试了网上提供的思路,更改相对路径,换为url中“../../Conte ...
- <<< PermGen space溢出解决方法
错误信息中的PermGen space的全称是Permanent Generation space,是指内存的永久保存区域.还没有弄明白PermGen space是属于非堆内存,还是就是非堆内存,但至 ...