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

选项A:

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

myTimeoutFunction();

选项B:

function myTimeoutFunction()
{
    doStuff();
}

myTimeoutFunction();
setInterval(myTimeoutFunction, 1000);

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


当前回答

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

其他回答

如果将setInterval中的间隔设置得太短,则它可能会在上一次函数调用完成之前触发。我在最近的浏览器(Firefox 78)中遇到了这个问题。这导致垃圾收集无法足够快地释放内存,并造成了巨大的内存泄漏。使用setTimeout(函数,500);给垃圾收集足够的时间来清理和保持内存稳定。

Serg Hospodarets在他的回答中提到了这个问题,我完全同意他的说法,但他没有包括内存泄漏/垃圾收集问题。我也经历了一些冻结,但对于一些微不足道的任务,内存使用量很快就达到了4GB,这对我来说真的很糟糕。因此,我认为这个答案对我这种情况下的其他人仍然有益。我本想发表评论,但缺乏这样做的声誉。我希望你不介意。

控制台的区别很明显:

有什么不同吗?

对在调用setTimeout()后,Timeout会执行一定的时间;Interval在上一个激发的间隔之后执行一定的时间。

如果doStuff()函数需要一段时间才能执行,则会注意到差异。例如,如果我们用.表示对setTimeout/setInterval的调用。,使用*触发超时/间隔,使用[--]执行JavaScript代码,时间线如下:

Timeout:

.    *  .    *  .    *  .    *  .
     [--]    [--]    [--]    [--]

Interval:

.    *    *    *    *    *    *
     [--] [--] [--] [--] [--] [--]

下一个复杂的问题是,如果JavaScript已经在忙着做某件事(例如处理上一个间隔)时触发了一个间隔。在这种情况下,间隔将被记住,并且在上一个处理程序完成并将控制权返回给浏览器时立即发生。例如,对于有时短([-])有时长([--])的doStuff()进程:

.    *    *    •    *    •    *    *
     [-]  [-----][-][-----][-][-]  [-]

•表示无法立即执行代码的间隔激发,而是被挂起。

因此,间隔时间尽量“赶上”进度。但是,它们不会一个一个地排队:每个间隔只能有一个执行等待。(如果他们都排队,浏览器将留下一个不断扩大的未执行列表!)

.    *    •    •    x    •    •    x
     [------][------][------][------]

x表示无法执行或挂起的间隔激发,因此被丢弃。

如果你的doStuff()函数习惯性地需要比为它设置的时间间隔更长的时间来执行,那么浏览器将消耗100%的CPU来服务它,并且可能会变得反应迟钝。

你用哪种?为什么?

链接超时为浏览器提供了一个保证的空闲时间;Interval试图确保它正在运行的功能尽可能接近其计划时间执行,而牺牲了浏览器UI的可用性。

我会考虑一次性动画的时间间隔,我希望它尽可能流畅,而链式超时对于加载页面时一直在进行的动画更为礼貌。对于要求较低的用途(例如每30秒启动一次微不足道的更新程序),您可以安全地使用其中之一。

就浏览器兼容性而言,setTimeout早于setInterval,但您现在遇到的所有浏览器都支持两者。多年来最后一个掉队的是WinMo<6.5版本的IE Mobile,但希望这也已经过时了。

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

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

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

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