javascript - JavaScript setInterval 和 setTimeout

Question

下一个代码每 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要执行？不应该setInterval是每 1 秒执行一次，没有别的可以执行？（上面的代码是否按照编写的顺序运行？）谢谢。

Answer 1

评论显示执行顺序

(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

希望这能消除你的困惑。

Answer 2

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

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

第一次回调将setInterval在 1 秒后，然后在 2 秒后再次回调。3 秒后setTimeout开始并清除setInterval。

Answer 3

一切都出来了setTimeout()，setInterval()无论如何都要执行。这不是sleep()PHP 的方法……可悲的是！

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

Answer 4

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

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