浅谈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 相关文章推荐
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
AngularJS实现ajax请求的方法
Nov 22 Javascript
判断横屏竖屏(三种)
Feb 13 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
vue动态注册组件实例代码详解
May 30 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 07 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
77A一级收信机修理记
2021/03/02 无线电
php简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
网上抓的一个特效
2007/05/11 Javascript
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
2017/04/28 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
vue-router实现tab标签页(单页面)详解
2017/10/17 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中的CURL PycURL使用例子
2014/06/01 Python
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
Django如何将URL映射到视图
2019/07/29 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
努比亚手机官网:nubia
2016/10/06 全球购物
python编程实现清理微信重复缓存文件
2021/11/01 Python
python读取mat文件生成h5文件的实现
2022/07/15 Python