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 相关文章推荐
线路分流自动跳转代码;希望对大家有用!
Dec 02 Javascript
在次封装easyui-Dialog插件实现代码
Nov 14 Javascript
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 Javascript
详解JSONObject和JSONArray区别及基本用法
Oct 25 Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 Javascript
JavaScript的setter与getter方法
Nov 29 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
JavaScript canvas绘制折线图
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
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
自动生成文章摘要的代码[PHP 版本]
2007/03/20 PHP
php 计划任务 检测用户连接状态
2012/03/29 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
CodeIgniter框架基本增删改查操作示例
2017/03/23 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
2015/09/09 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
Python实现全角半角转换的方法
2014/08/18 Python
在Python的Django框架中包装视图函数
2015/07/20 Python
Django 重写用户模型的实现
2019/07/29 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
python中matplotlib实现随鼠标滑动自动标注代码
2020/04/23 Python
Python代码中如何读取键盘录入的值
2020/05/27 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
大学生毕业自我鉴定范文
2013/09/19 职场文书
医学院毕业生自荐信
2013/11/08 职场文书
应用英语专业自荐信
2014/01/26 职场文书
“四风”问题的主要表现和危害思想汇报
2014/09/19 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
Redis持久化与主从复制的实践
2021/04/27 Redis
pytorch中的model.eval()和BN层的使用
2021/05/22 Python
Python基础之条件语句详解
2021/06/16 Python