JavaScript setInterval 和 setTimeout答案

【问题标题】：JavaScript setInterval and setTimeoutJavaScript setInterval 和 setTimeout
【发布时间】：2012-10-25 00:45:55
【问题描述】：

下一个代码每 1 秒显示一次日期，然后停止。

(function() {
    var i = setInterval(function() {
        console.log(new Date());
    }, 1000);
    console.log("Hi");

    setTimeout(function() {
        clearInterval(i);
    }, 3000);
    console.log("Hola");
})();

输出：

Hi
Hola
Wed Oct 24 2012 13:35:27 GMT+0200 (CEST)
Wed Oct 24 2012 13:35:28 GMT+0200 (CEST)
Wed Oct 24 2012 13:35:29 GMT+0200 (CEST)

但是不知道为什么Hi和Hola会先显示。另外，为什么要执行setTimeout？不应该每 1 秒执行一次 setInterval 并且不能执行其他任何操作？（上面的代码是否按照编写的顺序运行？）谢谢。

【问题讨论】：

所有代码直接运行。
没有。 setInterval 和 setTimeout 立即返回，您的函数继续。稍后超时到期以执行您提供给这些调用的代码时，其他代码的执行将被中断。
@sje397 运行代码的执行不会被暂停。相反，如果当时正在运行 javascript，则定时事件会延迟。
@Jan Dvorak 你每天都能学到一些东西 :) 谢谢。
这个链接可能有用phpied.com/sleep-in-javascript

标签： javascript settimeout setinterval

【解决方案1】：

cmets 显示执行顺序

(function() {                           // 0 anonymous function is called inline

    var i = setInterval(function() {    // 1 setInterval **schedules** the function 
                                        //     parameter to be executed every second
        console.log(new Date()); 
    }, 1000);
    console.log("Hi");                  // 2 Display 'Hi' on console

    setTimeout(function() {             // 3 **Schedule** the function parameter to 
                                        //     execute after three seconds
        clearInterval(i);     
    }, 3000);
    console.log("Hola");                // 4 Display 'Hola' on console
})();

                                        // 5 Display date from setInterval function

                                        // 6 Display date from setInterval function

                                        // 7 Display date from setInterval function

                                        // 8 Cancel setInterval executed from 
                                        //     setTimeout function

希望这能消除您的困惑。

【讨论】：

【解决方案2】：

setTimeout 和 setInterval 只注册函数（回调），然后直接进入下一个命令。

因此，Hi 和 Hola 在调用第一个回调之前打印。

第一个回调将是 1 秒后 setInterval 的回调，然后在 2 秒后再次回调。3 秒后 setTimeout 启动并清除 setInterval。

【讨论】：

@enrmarc 是的。你处理了一段时间已经过去的事实。

【解决方案3】：

setTimeout() 和 setInterval() 之外的所有内容都会被执行。这不是sleep() PHP 的方法……很遗憾！

但是，此链接可能有用：http://www.phpied.com/sleep-in-javascript/

【讨论】：

【解决方案4】：

http://ejohn.org/blog/how-javascript-timers-work/

这两个事件是异步的。它们在下一个可用时刻排队/执行，而不是在调用“setTimeout”或“setInterval”的确切时间。

【讨论】：

我在文章的前几段中数过两次，指出它们不是在单独的线程中执行的。
不是真正的另一个线程，因为 JavaScript 引擎是单线程的，但该链接仍然是一个很好的见解