浅谈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 相关文章推荐
jquery js 重置表单 reset()具体实现代码
Aug 05 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
jQuery中prepend()方法用法实例
Dec 25 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
Vue计算属性的使用
Aug 04 Javascript
JavaScript实现图片切换效果
Aug 12 Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 Javascript
对vue 键盘回车事件的实例讲解
Aug 25 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
bootstrap table实现iview固定列的效果实例代码详解
Sep 30 Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 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/03 咖啡文化
PHP 高手之路(一)
2006/10/09 PHP
PHP上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
Aster vs KG BO3 第二场2.18
2021/03/10 DOTA
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
2017/03/02 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
详解vue axios二次封装
2018/07/22 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
python 中if else 语句的作用及示例代码
2018/03/05 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
Python设计密码强度校验程序
2020/07/30 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
担保书怎么写
2014/04/01 职场文书
情况说明书格式范文
2014/05/06 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
校运会通讯稿
2015/07/18 职场文书
小学语文教学反思范文
2016/03/03 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
如何利用js在两个html窗口间通信
2021/04/27 Javascript
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers