js中定时器setTimeout函数的问题？

Posted 2023-05-02

对于函数：
function startMove()
div1.style.left=div1.offsetLeft+20+"px";
setTimeout('startMove()',300);

请问：
setTimeout是在上一个回调函数执行结束后，等指定的delay秒后再执行，还是上一个回调函数开始执行后（不管有没有执行完）就立即等delay秒后执行，还是上一个回调函数开始执行后（不管有没有执行完）就立即等delay秒，如果此刻上一个回调函数执行完了，就立即执行（等待时间恰好是delay秒），否则等上一个回调函数执行完，再执行，此时等的时间已经大于delay秒了。

setTimeout是在上一个回调函数执行结束后，等指定的delay秒后再执行，setInterval是上一个回调函数开始执行后（不管有没有执行完）就立即等delay秒后执行

然而

我们对javascript定时器存在一个误解，JavaScript其实是运行在单线程的环境中的，这就意味着定时器仅仅是计划代码在未来的某个时间执行，而具体执行时机是不能保证的，因为页面的生命周期中，不同时间可能有其他代码在控制JavaScript进程。在页面下载完成后代码的运行、事件处理程序、Ajax回调函数都是使用同样的线程，实际上浏览器负责进行排序，指派某段程序在某个时间点运行的优先级。

我们可以可以把JavaScript想象成在时间线上运行。当页面载入的时候首先执行的是页面生命周期后面要用的方法和变量声明和数据处理，在这之后JavaScript进程将等待更多代码执行。当进程空闲的时候，下一段代码会被触发
除了主JavaScript进程外，还需要一个在进程下一次空闲时执行的代码队列。随着页面生命周期推移，代码会按照执行顺序添加入队列，例如当按钮被按下的时候他的事件处理程序会被添加到队列中，并在下一个可能时间内执行。追问

是不是setInterval是严格按照delay来延时执行的，而setTimeout每次都要延时大于delay（取决于上一个回调函数什么时候执行完）再执行？我想问的是，你说“setInterval是上一个回调函数开始执行后（不管有没有执行完）就立即等delay秒后执行”，如果上一个回调函数没有执行完，就又执行一个回调函数，新执行的回调函数会不会影响上一个回调函数？比如：

参考技术A

都是等待执行完毕后执行的，可以尝试跑这段代码：

setInterval (function ()
alert(\'每次同时只会出现一个\');
, 3000);

setTimeout 这个函数是在延时后执行 1 次。而 setInterval 是一直延时、执行重复。

本回答被提问者和网友采纳

详解JS中定时器setInterval和setTImeout的this指向问题

在js中setTimeout和setInterval都是用来定时的一个功能，下面这篇文章主要给介绍了JS中setInterval和setTImeout的this指向问题,文中通过示例介绍的很详细，有需要的朋友可以参考借鉴，一起来看看吧。

前言

Js是一个单线程语言，可以通过setTimeout()和setInterval()来设置代码在指定时刻运行，前者是在指定时间后执行，后者是指每隔一段时间执行。两者的使用方法类似。

最近在练习写一个小例子的时候用到了定时器，发现在setInterval和setTimeout中传入函数时，函数中的this会指向window对象，详细的介绍通过一个示例展开，一起来看看吧。

如下例：

var num = 0;
function Obj (){
 this.num = 1,
 this.getNum = function(){
 console.log(this.num);
 },
 this.getNumLater = function(){
 setTimeout(function(){
  console.log(this.num);
 }, 1000)
 }
}
var obj = new Obj; 
obj.getNum();//1　　打印的为obj.num，值为1
obj.getNumLater()//0　　打印的为window.num，值为0

从上述例子中可以看到setTimeout中函数内的this是指向了window对象，这是由于setTimeout()调用的代码运行在与所在函数完全分离的执行环境上. 这会导致这些代码中包含的 this 关键字会指向 window (或全局)对象。详细可参考MDN setTimeout

但是在setTimeout中传入的不是函数时，this则指向当前对象，如下例：

var num = 0;
function Obj (){
 this.num = 1,
 this.getNum = function(){
 console.log(this.num);
 },
 this.getNumLater = function(){
 setTimeout(console.log(this.num), 1000)
 }
}
var obj = new Obj; 
obj.getNum();//1　　打印的为obj.num，值为1
obj.getNumLater()//1　　打印的为obj.num，值为1

从以上两个例子可以看出，当在setTimeout中传入的参数为函数时，函数内部的this才会指向window对象。

当在setTimeout中传入了一个函数，若想要让this指向正确的值，可以使用以下两种比较常用的方法来使this指向正确的值：

1.将当前对象的this存为一个变量，定时器内的函数利用闭包来访问这个变量

如下：

var num = 0;
function Obj (){
 var that = this; //将this存为一个变量，此时的this指向obj
 this.num = 1,
 this.getNum = function(){
 console.log(this.num);
 },
 this.getNumLater = function(){
 setTimeout(function(){
  console.log(that.num); //利用闭包访问that，that是一个指向obj的指针
 }, 1000)
 }
}
var obj = new Obj; 
obj.getNum();//1　　打印的为obj.num，值为1
obj.getNumLater()//1　　打印的为obj.num，值为1

这种方法是将当前对象的引用放在一个变量里，定时器内部的函数来访问到这个变量，自然就可以得到当前的对象。

2.利用bind()方法

var num = 0;
function Obj (){
 this.num = 1,
 this.getNum = function(){
 console.log(this.num);
 },
 this.getNumLater = function(){
 setTimeout(function(){
  console.log(this.num);
 }.bind(this), 1000) //利用bind()将this绑定到这个函数上
 }
}
var obj = new Obj; 
obj.getNum();//1　　打印的为obj.num，值为1
obj.getNumLater()//1　　打印的为obj.num，值为1

bind()方法是在Function.prototype上的一个方法，当被绑定函数执行时，bind方法会创建一个新函数，并将第一个参数作为新函数运行时的this。在这个例子中，在调用setTimeout中的函数时，bind方法创建了一个新的函数，并将this传进新的函数，执行的结果也就是正确的了。关于bind方法可参考 MDN bind

以上两种方法都是比较常用的，当然如果使用call或apply方法来代替bind方法，得到的结果也是正确的，但是call方法会在调用之后立即执行，那样也就没有了延时的效果，定时器也就没有用了，所以推荐使用上述两种方法来将this传进setTimeout和setInterval中。

 

本文转载于脚本之家，作者：陌路黄昏后   的文章，原文链接：https://m.jb51.net/article/102232.htm

如有侵权，请告知删除