浅谈setTimeout 与 setInterval


Posted in Javascript onJune 23, 2015

最新写代码中时,看到项目中有人用到了 setTimeout(fun,0),于是想总结一下。个人理解,如果有错误的地方还请指出。THX

要想理解JavaScript的定时器是如何工作的,先要明白 JavaScript 引擎是单线程的。这个可以理解为 javascript 引擎是一个服务员,它有一个服务的队列,所有的界面元素事件,定时触发器回调,异步请求回调都要在这个任务队列里排队,等待处理。所有任务都是一个最小单位,不会中断处理。这样就可以理解 setTimeout(fun,0) 了,它并不是代表立即执行该代码,除非任务队列为空(事实上,各个浏览器在实际执行这个的时候也是有差异了,比较新的浏览器实际可能是在4ms;老版本的可能更长一点,16ms也是可能的)。而 setTimeout(fun,time) 的意思就是多少时间后将 fun 回调加到这个任务队列中,也就是至少需要time时间才会执行fun。

举个例子:

setTimeout(function () {
 console.log(1);
}, 0);
var tem = 0;
for (var i = 1; i < 1000000; i++) {
 tem += i;
};
console.log(2);

显示结果为

2

1

就是说,在执行 setTimeout 时,将 function 回调加入了任务队列,但并没有立即执行,因为js引擎还在忙着处理当前的js,而只在这段代码段执行完才去任务列表里取新的任务,所以结果就是先显示 2 后显示 1。

setInterval(fun, time)方法是,每隔一定时间将fun添加到队列中,那么问题来,如果fun执行时间比 time 要长的时候怎么办?

看一段代码

var num = 0;
var time = setInterval(function () {
 var tem = 0;
 for (var i = 1; i < 99999999; i++) {
 tem += i;
 };
 num ++;
 console.log(num);
}, 100);

setTimeout(function (){
 clearInterval(time);
}, 1000);

意思是每隔100ms执行一段代码,在1s中后清除这个定时器。但是结果呢?

显示结果为

1

2

3

也就是说,事实上,并没有执行到那么多次数。也就是说某些间隔会被跳过,这也就存在多个代码执行的间隔可能会比预期的小。原来在将定时器代码加入队列的时候,如果该定时器的代码实例存在时,该次定时器代码会被跳过。

引用一张图片,就很好理解了。

浅谈setTimeout 与 setInterval

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JS在IE和FireFox之间常用函数的区别小结
Mar 12 Javascript
JS实现点击下载的小例子
Jul 10 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 Javascript
基于Angularjs实现分页功能
May 30 Javascript
关于Javascript中document.cookie的使用
Mar 08 Javascript
Angular2 组件通信的实例代码
Jun 23 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
Oct 25 Javascript
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
JS数组的常用10种方法详解
May 08 Javascript
js抽奖转盘实现方法分析
May 16 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 #Javascript
javascript中传统事件与现代事件
Jun 23 #Javascript
浅谈jquery中delegate()与live()
Jun 22 #Javascript
jquery 中ajax执行的优先级
Jun 22 #Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 #Javascript
jquery中toggle函数交替使用问题
Jun 22 #Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 #Javascript
You might like
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
PHP中Date()时间日期函数的使用方法小结
2011/04/20 PHP
php中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
javascript获取当前ip的代码
2009/05/10 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
Python中super的用法实例
2015/05/28 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
设置python3为默认python的方法
2018/10/31 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技
SQL Server删除表中的重复数据
2022/05/25 SQL Server
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB