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

选项A:

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

myTimeoutFunction();

选项B:

function myTimeoutFunction()
{
    doStuff();
}

myTimeoutFunction();
setInterval(myTimeoutFunction, 1000);

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


当前回答

有什么不同吗?

对在调用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(func,milisec)进行了简单的测试,因为我很好奇当函数时间消耗大于间隔持续时间时会发生什么。

setInterval通常会在上一次迭代开始之后安排下一次迭代,除非函数仍在运行。如果是,setInterval将等待,直到函数结束。一旦发生,函数就会立即再次启动——不需要根据计划等待下一次迭代(因为在没有时间超过函数的情况下)。并行迭代也没有运行的情况。

我已经在Chrome v23上测试过了。我希望它在所有现代浏览器中都是确定性的实现。

window.setInterval(function(start) {
    console.log('fired: ' + (new Date().getTime() - start));
    wait();
  }, 1000, new Date().getTime());

控制台输出:

fired: 1000    + ~2500 ajax call -.
fired: 3522    <------------------'
fired: 6032
fired: 8540
fired: 11048

wait函数只是一个线程阻塞助手-同步ajax调用,在服务器端需要2500毫秒的处理时间:

function wait() {
    $.ajax({
        url: "...",
        async: false
    });
}

他们本质上试图做同样的事情,但setInterval方法将比setTimeout方法更准确,因为setTimeout等待1000ms,运行函数,然后设置另一个超时。因此,等待时间实际上比1000毫秒多一点(如果您的函数需要很长时间才能执行,则会更长)。

虽然有人可能认为setInterval将每1000ms执行一次,但需要注意的是,setInterval也会延迟,因为JavaScript不是一种多线程语言,这意味着,如果脚本的其他部分正在运行,则该间隔必须等待它完成。

在这个Fiddle中,您可以清楚地看到超时将落后,而时间间隔几乎一直都是1次/秒(脚本正在尝试这样做)。如果将顶部的速度变量更改为20这样的小值(意味着它将尝试每秒运行50次),则间隔将永远不会达到每秒50次迭代的平均值。

延迟几乎总是可以忽略不计的,但是如果你正在编程一些非常精确的东西,你应该使用一个自动调整的计时器(它本质上是一个基于超时的计时器,它会根据创建的延迟不断调整自己)

当您运行以下javascript或检查此JSFiddle时,您可以自己验证bobcen答案

<div id="timeout"></div>
<div id="interval"></div>

var timeout = 0;
var interval = 0;

function doTimeout(){
    $('#timeout').html(timeout);
    timeout++;
    setTimeout(doTimeout, 1);
}

function doInterval(){
    $('#interval').html(interval);
    interval++;
}

$(function(){
    doTimeout();
    doInterval();
    setInterval(doInterval, 1);
});

我认为SetInterval和SetTimeout不同。SetInterval根据设置的时间执行块,而SetTimeout执行一次代码块。

在超时倒计时秒后尝试以下代码:

setInterval(function(e){
    alert('Ugbana Kelvin');
}, 2000);

然后尝试

setTimeout(function(e){
    alert('Ugbana Kelvin');
}, 2000);

你可以自己看到不同之处。

我使用setTimeout。

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

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