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 相关文章推荐
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 Javascript
javascript基本语法
May 31 Javascript
浅析Javascript ES6新增值比较函数Object.is
Aug 24 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
Bootstrap风格的zTree右键菜单
Feb 17 Javascript
Vue 过滤器filters及基本用法
Dec 26 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 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
各种咖啡的英文名子是什么
2021/03/03 新手入门
计数器详细设计
2006/10/09 PHP
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
PHP 根据IP地址控制访问的代码
2010/04/22 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
通过DOM脚本去设置样式信息
2010/09/19 Javascript
js 幻灯片的实现
2011/12/06 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
2012/09/14 Javascript
jquery 追加tr和删除tr示例代码
2013/09/12 Javascript
基于jQuery实现收缩展开功能
2016/03/18 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
解决vue v-for 遍历循环时key值报错的问题
2018/09/06 Javascript
angular多语言配置详解
2019/05/16 Javascript
React中使用UMEditor的方法示例
2019/12/27 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
Python和php通信乱码问题解决方法
2014/04/15 Python
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
Python入门教程之if语句的用法
2015/05/14 Python
win10系统中安装scrapy-1.1
2016/07/03 Python
Python实现从log日志中提取ip的方法【正则提取】
2018/03/31 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
python实现二维数组的对角线遍历
2019/03/02 Python
python挖矿算力测试程序详解
2019/07/03 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
Python 用__new__方法实现单例的操作
2020/12/11 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
劳资员岗位职责
2013/11/11 职场文书
环保标语口号
2014/06/13 职场文书
物流专业求职信
2014/06/30 职场文书
生产工厂门卫岗位职责
2014/09/26 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python