在 javascript 中使用 setInterval() 时的程序控制流程答案

【问题标题】：control flow of program when using setInterval() in javascript在 javascript 中使用 setInterval() 时的程序控制流程
【发布时间】：2012-09-16 00:55:42
【问题描述】：

在Javascript中使用setInterval()时，我真的不明白程序的控制流程。
如果我们给SetInterval()方法提供一个需要100ms时间执行的函数，时间为20ms，如下所示

       setInterval(function{
                      for(var i=0;i<1000000;i++)
                           console.log(i)
                           },20);

当setInterval() 20ms 后再次调用它时，会发生什么？？
谢谢 :)

添加：简单循环和使用 setInterval 循环和使用 clearInterval 停止之间的主要区别是什么？
检查这个http://www.sitepoint.com/multi-threading-javascript/

【问题讨论】：

标签： javascript setinterval

【解决方案1】：

setInterval 是一个 Javascript 计时器。永远记住：在 Javascript 中，定时器延迟是不能保证的。由于浏览器中的所有 JavaScript 都在单个线程上执行，因此异步事件仅在执行过程中有空缺时才会运行。

var some_function = function() { 
    for (var i=0; i < 1000000; i++) { 
        console.log(i); 
    } 
};
setInterval(some_function, 20);

当这个例子执行时，JavaScript 启动计时器，并在 20ms 内执行some_function

假设some_function 需要 100 毫秒才能完成，那么当函数完成执行后大约 100 毫秒会发生什么，JavaScript 会环顾四周，看看等待执行的内容。

它会发现在setInterval 开始执行后约20ms，收到了另一个执行some_function 的请求（由setInterval 设置的计时器）。在收到命令时，它无法执行，因为 JavaScript 正忙于运行 some_function。

由于没有任何东西阻止setInterval 操作的发生，JavaScript 将重新执行它。自 setInterval 计时器启动以来已过去约 120 毫秒，您的 some_function 显然将连续执行。

【讨论】：

【解决方案2】：

首先让我们从修复您的 javascript 开始，因为您缺少一些右括号：

setInterval(function() {
    for(var i = 0; i < 1000000; i++) {
        console.log(i);
    }
}, 20);

相当于如下：

function loopAndDump() {
   for(var i = 0; i < 1000000; i++) {
       console.log(i);
    }
}

setInterval(loopAndDump, 20);

或：

setInterval(function() { loopAndDump(); }, 20);

现在更容易理解发生了什么：loopAndDump 函数每隔 20 毫秒定期调用一次。此函数只是从 0 循环到 1000000 并将计数器转储到控制台。如果你想阻止这个进程定期执行函数，你可以使用 stopInterval 函数并将 setInterval 函数返回的结果作为参数传递。

如果你只想执行一次函数，那么你可以使用setTimeout 方法：

setTimeout(function() {
    for(var i = 0; i < 1000000; i++) {
        console.log(i);
    }
}, 20);

现在循环将只执行一次，在 javascript 解释器到达 setTimeout 行后 20 毫秒。

【讨论】：

但是当我们查看这个链接时sitepoint.com/multi-threading-javascript 为什么简单循环不同于通过 setInterval 方法循环并使用 clearInterval 停止？？
setInterval 函数可以让你定期执行一些javascript代码。
其他方式？在应用程序内？还是在浏览器中？？

【解决方案3】：

20 毫秒后不会再次调用。

Javascript 是严格的单线程的，所以只要你的函数在运行，就不会处理任何事件。间隔计时器将在 20 毫秒后触发一个事件，但在您的函数完成之前不会对其进行处理。

【讨论】：