setTimeout与setInterval的坑以及优缺点

说到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坑比的原因啊,因为这会出现一种情况,当我们插入回调的时候前队列有别的代码在执行,这时候回调肯定是不会执行的,因此如果这个时候无限定时时间到了会再次插入回调,这个时候如果发现队列中的第一次回调没有执行,那么再次插入的回调浏览器就默认取消,(这是以防出现回调连续执行多次的情况)但是这又引发了新的情况就是有些回调是不能取消掉的?

这就是我们经常使用例一代替例二的原因,例一可以避免上述的情况。累,很简单的东西被我说的这么复杂,我也是醉了,看来文字功底还很欠缺,可是我的梦想是新时代的作家,这可咋整呢?

时间: 2024-10-25 12:22:12

setTimeout与setInterval的坑以及优缺点的相关文章

你可能不知道的setInterval的坑

之前印象中一直记得setInterval有一些坑,但是一直不是很清楚那些坑是什么.今天去摸索了下之后,决定来做个记录以免自己忘记,也希望让更多人了解到这个坑. setInterval会无视代码的错误.就算遇到了错误,它还是会一直循环下去,不会停止.这就导致了可能你代码里存在着一些问题(比如你的代码可能有个一定概率下会发生的错误,而你使用setinterval来循环调用它,由于setinterval不会因为报错停止,所以这个问题可能被隐藏),可是却很难发现. let count = 1; setI

setTimeout()与setInterval()——走马灯效果

JavaScript中的setTimeout()与setInterval()都是指延时执行某一操作. 但setInterval()指每隔指定时间执行某操作,会循环不断地执行该操作:setTimeout()只延时指定时间后执行该操作,且只执行一次. setTimeout()在某种情况下也能实现setInterval()的效果,比较经典的例子就是在在函数内部调用自己.向下面这样: function example(){ ... setTimeout("example()", 1000);

js setTimeout 与 setInterval 以及 for 循环 刷新UI

1. setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式:执行一次: 如果需要执行多次,自身再次调用 setTimeout(): 示例:无穷循环并带停止按钮的 <html> <head> <script type="text/javascript"> var c=0 var t function timedCount() { document.getElementById('txt').value=c c=c+1 t=setTim

JS中的setTimeout和setInterval的区别

学了许久的javascript,发现其中非常常用的两个函数,就是setInterval和setTimeout函数,对这两个函数的理解,有时觉得很模糊,经过多次的试验,终于对它有了比较深入的了解.定义,setInterval()-- 间隔指定的毫秒数不停地执行指定的代码.setTimeout,延迟两秒调用函数,这个定义非常的简单,但是它并不像字面意思上那么的简 很多人都觉得这两个方法差不多,但是,实际上,他们差的很远呢     因为setTimeout(表达式,延时时间)在执行时,是在载入后延迟指

setTimeout与setInterval的区别

setTimeout与setInterval的区别:1.setTimeout设置后隔指定时间后只会执行一次2.setInterval设置后会每隔指定时间执行一次3.setTimeout一般在方法内部使用达到循环调用的效果4.setInterval一般在方法外部使用就可以达到循环调用效果 setTimeout例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

setTimeout()与setInterval()方法区别介绍

计时器setTimeout()和setInterval()两个都是js的计时功能的函数两个有些区别,下面为大家简单介绍下,希望对大家有所帮助 计时器setTimeout()和setInterval()两个都是js的计时功能的函数两个有些区别. setTimeout(): 在js手册中的解释:用于在指定的毫秒数后调用函数或计算表达式: 也就是说在执行完设定好的秒数后再执行. 代码如下: setTimeout(function(){ $("body").css("backgrou

setTimeout与setInterval方法的区别

setTimeout与setInterval方法的区别 setTimeout()用于设定在指定的时间之后执行对应的函数或代码.,在全局作用域下执行 setTimeout(code,time[,args…]) code: 需要执行的函数或js代码,等待的时间,args:参数 如:function sayHello(name, age){ //在5秒钟后弹出提示信息"我叫CodePlayer,今年18岁!". alert("我叫" + name + ",今年&

Javascript 笔记与总结(2-13)定时器 setTimeout 和 setInterval

定时器可以让 js 效果每隔几秒钟执行一次或者 n 秒之后执行某一个效果.定时器不属于 javascript,是 window 对象提供的功能. setTimeout 用法: window.setTimeout('语句',毫秒); //指定毫秒后执行一次语句 [例] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D

QML中实现setTimeout和setInterval

Qt的QML中,js未提供setTimeout和setInterval,可以通过下面的代码实现. Timer {id: timer} function setTimeout(cb,delayTime) { //timer = new Timer(); timer.interval = delayTime; timer.repeat = false; timer.triggered.connect(cb); timer.start(); } https://my.oschina.net/lieef