据我所知,这两个javascript的行为方式相同:

选项A:

function myTimeoutFunction()
{
    doStuff();
    setTimeout(myTimeoutFunction, 1000);
}

myTimeoutFunction();

选项B:

function myTimeoutFunction()
{
    doStuff();
}

myTimeoutFunction();
setInterval(myTimeoutFunction, 1000);

使用setTimeout和setInterval之间有什么区别吗?


当前回答

我使用setTimeout。

显然,区别在于setTimeout只调用一次方法,setInterval则重复调用它。

这是一篇很好的文章,解释了两者的区别:教程:带有setTimeout和setInterval的JavaScript计时器

其他回答

如果您想取消超时,我发现setTimeout方法更容易使用:

function myTimeoutFunction() {
   doStuff();
   if (stillrunning) {
      setTimeout(myTimeoutFunction, 1000);
   }
}

myTimeoutFunction();

此外,如果函数中出现错误,它将在第一次错误时停止重复,而不是每秒重复错误。

setInterval和setTimeout都返回一个计时器id,您可以使用它来取消执行,即在触发超时之前。要取消,请调用clearInterval或clearTimeout,如下所示:

var timeoutId = setTimeout(someFunction, 1000);
clearTimeout(timeoutId);
var intervalId = setInterval(someFunction, 1000),
clearInterval(intervalId);

此外,当您离开页面或关闭浏览器窗口时,超时会自动取消。

要考虑的重要一点是性能。使用setTimeout周期性运行函数的唯一方法是用目标函数递归地调用它,当您检查它时,它似乎以异步方式工作。当您看到调用堆栈时,您会发现它一直在增长。事实上,这是明智的。由于Javascript不支持多线程,因此不可能在完成子函数之前完成对父函数的调用,因此,只要有递归调用,堆栈就会继续增长。同时,使用setInterval,我们不需要递归调用目标函数,因为它有一个作为循环周期性运行的逻辑。因此,这保持了调用堆栈的清洁。您可以在浏览器中使用开发人员的工具查看调用堆栈,您会注意到其中的差异。

当长时间使用小间隔时,差异将很明显。

控制台的区别很明显:

当您在setInterval中运行某个函数时,它的工作时间比超时时间长->浏览器将被卡住。-例如,doStuff()需要1500秒才能执行,您需要:setInterval(doStuff,1000);1) 浏览器运行doStuff(),需要1.5秒才能执行;2) 约1秒后,它尝试再次运行doStuff()。但之前的doStuff()仍在执行->所以浏览器将此运行添加到队列中(在第一次完成后运行)。3,4,..) 相同的添加到下一次迭代的执行队列中,但上一次的doStuff()仍在进行中。。。结果,浏览器卡住了。为了防止这种行为,最好的方法是在setTimeout内运行setTimeout以模拟setInterval。要纠正setTimeout调用之间的超时,可以使用JavaScript的setInterval技术的自我纠正替代方法。