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

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

setInterval可以更容易地取消代码的未来执行。如果使用setTimeout,则必须跟踪计时器id,以防以后取消它。

var timerId = null;
function myTimeoutFunction()
{
    doStuff();
    timerId = setTimeout(myTimeoutFunction, 1000);
}

myTimeoutFunction();

// later on...
clearTimeout(timerId);

function myTimeoutFunction()
{
    doStuff();
}

myTimeoutFunction();
var timerId = setInterval(myTimeoutFunction, 1000);

// later on...
clearInterval(timerId);

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

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

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

您的代码将具有不同的执行间隔,在某些项目中,例如在线游戏,这是不可接受的。首先,您应该怎么做,以使代码在相同的整数下工作,您应该将“myTimeoutFunction”更改为:

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

此更改后,它将等于

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

但是,您仍然不会得到稳定的结果,因为JS是单线程的。目前,如果JS线程将忙于某些事情,它将无法执行回调函数,并且执行将延迟2-3毫秒。您是否每秒执行60次,并且每次您有1-3秒的随机延迟,这是绝对不可接受的(一分钟后,大约会有7200毫秒的延迟),我可以建议您使用类似的方法:

    function Timer(clb, timeout) {
        this.clb = clb;
        this.timeout = timeout;
        this.stopTimeout = null;
        this.precision = -1;
    }

    Timer.prototype.start = function() {
        var me = this;
        var now = new Date();
        if(me.precision === -1) {
            me.precision = now.getTime();
        }
        me.stopTimeout = setTimeout(function(){
            me.start()
        }, me.precision - now.getTime() + me.timeout);
        me.precision += me.timeout;
        me.clb();
    };

    Timer.prototype.stop = function() {
        clearTimeout(this.stopTimeout);
        this.precision = -1;
    };

    function myTimeoutFunction()
    {
        doStuff();
    }

    var timer = new Timer(myTimeoutFunction, 1000);
    timer.start();

此代码将保证稳定的执行周期。即使线程也会很忙,您的代码将在1005毫秒后执行,下次它将有995毫秒的超时,结果将是稳定的。

setInterval()

setInterval()是一种基于时间间隔的代码执行方法,它具有在达到时间间隔时重复运行指定脚本的本机能力。脚本作者不应将其嵌套到回调函数中以使其循环,因为默认情况下它会循环。除非您调用clearInterval(),否则它将在间隔时间内继续激发。

如果您想为动画或时钟周期循环代码,请使用setInterval()。

function doStuff() {
    alert("run your code here when time interval is reached");
}
var myTimer = setInterval(doStuff, 5000);

setTimeout()

setTimeout()是一种基于时间的代码执行方法,当达到时间间隔时,只执行一次脚本。除非您将setTimeout()对象嵌套在要运行的函数内,使其循环脚本,否则它不会再次重复。如果调整为循环,除非调用clearTimeout(),否则它将在间隔时间内继续发射。

function doStuff() {
    alert("run your code here when time interval is reached");
}
var myTimer = setTimeout(doStuff, 5000);

如果您希望某件事在指定的时间段后发生一次,请使用setTimeout()。这是因为它只在达到指定间隔时执行一次。