说到setTimeout与setInrerval大家可能都觉得很easy,我刚接触js的也是这样的想法,可后来在知乎看到了一道题,大概好像是这样的:
例一:
setTimeout(function(){
console.log("小马“);
setTimeout(function(){arguments.callee;},1000);
},1000)
例二:
setInterval(function(){console.log("小马“);},1000);
问一与二的区别?
说实话我刚看到这个题目的时候是懵比的,因为我觉得这两者是完全一样的呀,都是间隔1000ms之后执行回调的呀,可是既然这么问了肯定他们之间是有区别的,于是乎我就去查了相关的资料,果然,二者不仅仅是有差别的,而且定时器也颠覆了我以往的认知。
首先,这两个定时器的基本含义我就不重复了,我觉得只要是个学前端的肯定没有不知道的。为什么说定时器也颠覆了我以往的认知呢?因为我发现定时器的回调函数并不是相当于在时间到了就执行,而是有一个主js执行进程,这个进程是页面刚加载的时候页面按照加载顺序执行的js代码,此外还有一个需要在进程空闲的时候执行的代码队列,而我们所说的定时器的回调就是相当于(以上的例一为例)在1000ms之后把定时器回调放入到空闲队列中(注意,空闲队列有可能还有其它的代码,比如点击事件,因此定时器回调放入的位置不一定是空闲队列的开始位置!)举个例子:
var i=0;
function a(){
t=setTimeout(function(){console.log("小明")},0);
}
a();
alert(”小红“);
此时你会发现先弹出小红,又弹出的小明!!
好了,简单的可以理解位定时器和js其他程序是并行执行的,不过jquery的作者有一篇文章专门介绍这个队列的,有兴趣的可以搜一下看看!!
接下来说第二点,就是例一与例二的区别:
setInterval有个很烦的地方就是当js主程序空闲时候,执行代码队列里面的代码的时候,如果此时候我们有一个问题,定时器是等到回调执行完,才开始计时进行下次循环呢?还是只要一次计时完毕,插入回调之后不管回调执不执行就开始计时呢?答案显然是后者,这也就是我说setInterval坑比的原因啊,因为这会出现一种情况,当我们插入回调的时候前队列有别的代码在执行,这时候回调肯定是不会执行的,因此如果这个时候无限定时时间到了会再次插入回调,这个时候如果发现队列中的第一次回调没有执行,那么再次插入的回调浏览器就默认取消,(这是以防出现回调连续执行多次的情况)但是这又引发了新的情况就是有些回调是不能取消掉的?
原文:https://www.cnblogs.com/yuyunfei/p/5479766.html
相关推荐
Javascript定时器(二)——setTimeout与setInterval 在 http://www.cnblogs.com/strick/p/3983904.html 有说明
JS中的setTimeout和setInterval的区别JS中的setTimeout和setInterval的区别JS中的setTimeout和setInterval的区别
06_再看setTimeout与setInterval.html
使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间,再进行某项操作。
给c#添加SetTimeout和SetInterval函数.docx
JS中定时执行,setTimeout和setInterval的区别 <br>setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间,再进行某项操
关于JS定时器(setTimeout setInterval)定时不准问题1
NULL 博文链接:https://rainbow702.iteye.com/blog/1668935
Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请求获取最新数据等等。但它们的应用是有区别的。 ...
主要帮助大家学习理解javascript定时器中的setTimeout与setInterval,从实例出发进行深入探讨,感兴趣的小伙伴们可以参考一下
主要介绍了JavaScript中从setTimeout与setInterval到AJAX异步,非常不错,具有参考借鉴价值,需要的朋友可以参考下
setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 注:调用过程中,可以使用clearTimeout(id_of_settimeout)终止 参数 描述 code 必需,要调用的...
今天先学下setTimeout和setInterval的使用。 一、setTimeout超时计时器(和GCD中的after类似) 在node.js中可以使用node.js内置的setTimeout(callback,delayMillSeconds,[args])方法。当调用setTime()时回调函数会在...
setInterval setTimeout.html
JavaScript中setTimeout和setInterval函数的传参及调用_.docx
主要介绍了js基于setTimeout与setInterval实现多线程的方法,分析了多线程的原理与javascript模拟实现多线程的相关技巧,需要的朋友可以参考下
setInterval(code,millisec[,”lang”]) setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。 参数 描述 code 必需,要调用的函数或要执行的代码串。 millisec 必需,周期性执行或调用...
大概半年前发表过一篇关于setTimeout和setInterval的文章,但是现在回去仔细一看发现其实存在很多不足以及错误。事实上,setTimeout和setInterval并没有我们字面上理解的那么简单。要真正掌握并理解这两个方法,还得...
小程序中有两个定时器:setTimeout与setInterval setTimeout:可延时回调 setInterval:可定时循环回调 第一次这样使用: setTimeout(function(){ console.log(延时1秒回调) },1000) setInterval(function(){ ...