Js中setTimeout()和setInterval() 何时被调用执行的用法


Posted in Javascript onApril 12, 2013

定义
setTimeout()和setInterval()经常被用来处理延时和定时任务。setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则可以在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除。
从定义上我们可以看到两个函数十分类似,只不过前者执行一次,而后者可以执行多次,两个函数的参数也相同,第一个参数是要执行的code或句柄,第二个是延迟的毫秒数。
很简单的定义,使用起来也很简单,但有时候我们的代码并不是按照我们的想象精确时间被调用的,很让人困惑

简单示例
看个简单的例子,简单页面在加载完两秒后,写下Delayed alert!

setTimeout('document.write("Delayed alert!");', 2000);

看起来很合理,我们再看个setInterVal()方法的例子
var num = 0;
        var i = setInterval(function() {
            num++;
            var date = new Date();
            document.write(date.getMinutes() + ':' + date.getSeconds() + ':' + date.getMilliseconds() + '<br>');
            if (num > 10)
                clearInterval(i);
        }, 1000);

页面每隔1秒记录一次当前时间(分钟:秒:毫秒),记录十次后清除,不再记录。考虑到代码执行时间可能记录的不是执行时间,但时间间隔应该是一样的,看看结果
:38:116
:39:130
:40:144
:41:158
:42:172
:43:186
:44:200
:45:214
:46:228
:47:242
:48:256

为什么
时间间隔几乎是1000毫秒,但不精确,这是为什么呢?原因在于我们对JavaScript定时器存在一个误解,JavaScript其实是运行在单线程的环境中的,这就意味着定时器仅仅是计划代码在未来的某个时间执行,而具体执行时机是不能保证的,因为页面的生命周期中,不同时间可能有其他代码在控制JavaScript进程。在页面下载完成后代码的运行、事件处理程序、Ajax回调函数都是使用同样的线程,实际上浏览器负责进行排序,指派某段程序在某个时间点运行的优先级。
我们把效果放大一下看看,添加一个耗时的任务
function test() {
            for (var i = 0; i < 500000; i++) {
                var div = document.createElement('div');
                div.setAttribute('id', 'testDiv');
                document.body.appendChild(div);
                document.body.removeChild(div);
            }
        }
        setInterval(test, 10);
        var num = 0;
        var i = setInterval(function() {
            num++;
            var date = new Date();
            document.write(date.getMinutes() + ':' + date.getSeconds() + ':' + date.getMilliseconds() + '<br>');
            if (num > 10)
                clearInterval(i);
        }, 1000);

我们又加入了一个定时任务,看看结果
:9:222
:12:482
:16:8
:19:143
:22:631
:25:888
:28:712
:32:381
:34:146
:35:565
:37:406

这下效果明显了,差距甚至都超过了3秒,而且差距很不一致。
我们可以可以把JavaScript想象成在时间线上运行。当页面载入的时候首先执行的是页面生命周期后面要用的方法和变量声明和数据处理,在这之后JavaScript进程将等待更多代码执行。当进程空闲的时候,下一段代码会被触发

除了主JavaScript进程外,还需要一个在进程下一次空闲时执行的代码队列。随着页面生命周期推移,代码会按照执行顺序添加入队列,例如当按钮被按下的时候他的事件处理程序会被添加到队列中,并在下一个可能时间内执行。在接到某个Ajax响应时,回调函数的代码会被添加到队列。JavaScript中没有任何代码是立即执行的,但一旦进程空闲则尽快执行。定时器对队列的工作方式是当特定时间过去后将代码插入,这并不意味着它会马上执行,只能表示它尽快执行。
知道了这些后,我们就能明白,如果想要精确的时间控制,是不能依赖于JavaScript的setTimeout函数的。

重复的定时器
使用 setInterval() 创建的定时器可以使代码循环执行,到有指定效果的时候,清除interval就可以,如下例

var my_interval = setInterval(function () {
            if (condition) {
                //..........
            } else {
                clearInterval(my_interval);
            }
        }, 100);

但这个方式的问题在于定时器的代码可能在代码再次被添加到队列之前还没有执行完成,结果导致循环内的判断条件不准确,代码多执行几次,之间没有停顿。不过JavaScript已经解决这个问题,当使用setInterval()时,仅当没有该定时器的其他代码实例时才将定时器代码插入队列。这样确保了定时器代码加入到队列的最小时间间隔为指定间隔。

这样的规则带来两个问题

1.1. 某些间隔会被跳过
2.2.多个定时器的代码执行之间的间隔可能比预期要小
为了避免这两个缺点,我们可以使用setTimeout()来实现重复的定时器

setTimeout(function () {
            //code
            setTimeout(arguments.callee, interval);
        }, interval)

这样每次函数执行的时候都会创建一个新的定时器,第二个setTimeout()调用使用了agrument.callee 来获取当前实行函数的引用,并设置另外一个新定时器。这样做可以保证在代码执行完成前不会有新的定时器插入,并且下一次定时器代码执行之前至少要间隔指定时间,避免连续运行。
setTimeout(function () {
            var div = document.getElementById('moveDiv');
            var left = parseInt(div.style.left) + 5;
            div.style.left = left + 'px';
            if (left < 200) {
                setTimeout(arguments.callee, 50);
            }
        }, 50);

这段定时器代码每次执行的时候,把一个div向右移动5px,当坐标大于200的时候停止。
Javascript 相关文章推荐
jQuery 阴影插件代码分享
Jan 09 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
Apr 13 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 Javascript
详解Node.Js如何处理post数据
Sep 19 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
vue的toast弹窗组件实例详解
May 14 Javascript
简述JS控制台的使用
Jul 15 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 Javascript
js实现单一html页面两套css切换代码
Apr 11 #Javascript
获取内联和链接中的样式(js代码)
Apr 11 #Javascript
JavaScript在XHTML中的用法详解
Apr 11 #Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 #Javascript
javascript标签在页面中的位置探讨
Apr 11 #Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 #Javascript
如何使用json在前后台进行数据传输实例介绍
Apr 11 #Javascript
You might like
PHP初学者头疼问题总结
2006/07/08 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
如何判断php mysqli扩展类是否开启
2016/12/24 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
javascript void(0)的妙用
2009/10/21 Javascript
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
JS date对象的减法处理实现代码
2010/12/28 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
Python找出list中最常出现元素的方法
2016/06/14 Python
Python编写Windows Service服务程序
2018/01/04 Python
python中entry用法讲解
2020/12/04 Python
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
SQL注入攻击的种类有哪些
2013/12/30 面试题
经济担保书范文
2014/04/02 职场文书
什么是就业协议书
2014/04/17 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
体育教师个人总结
2015/02/09 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers