setTimeout 与 Event Loop 浅析

先从一个小题目开始: 以下代码的输出结果是?

//
function test1 () {
  console.log(1)
};

setTimeout(test1, 1000);                // T1-1setTimeout(test1(), 1000);              // T1-2
setTimeout(console.log(1.1), 1000);     // T1-3

下面还有加强版:

//
function test2(value) {
  value = value || 'default 2';
  console.log(value);
}

setTimeout(test2, 1000, 2.1);           // T2-1
setTimeout(test2(), 1000, 2.2);         // T2-2
setTimeout(test2(2.3), 1000, 2.31);     // T2-3

//
function test3(value) {
  value = value || 'default 3';
  console.log(value);

  return test3;
}

setTimeout(test3, 1000, 3.1);           // T3-1
setTimeout(test3(), 1000, 3.2);         // T3-2
setTimeout(test3(3.3), 1000, 3.31)      // T3-3

//
for(var i = 0; i < 5; i++) {            // T4-1
  console.log(i);
}

for(var i = 0; i < 5; i++) {            // T4-2
  setTimeout(function() {
    console.log(i);
  }, 1000 * i);
}

for(var i = 0; i < 5; i++) {            // T4-3
  setTimeout(function(i) {
    console.log(i);
  }, 1000 * i);
}

for(var i = 0; i < 5; i++) {            // T4-4
  (function(i) {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })(i);
}

for(var i = 0; i < 5; i++) {            // T4-5
  (function() {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })(i);
}

for(var i = 0; i < 5; i++) {            // T4-6
  setTimeout((function(i) {
    console.log(i);
  })(i), i * 1000);
}

//
function someLoop(){
  var tag = true;
  var temp = 0;

  setTimeout(function(){
    tag = !tag;
    console.log(tag)
  }, 1000);

  while(tag) {
    temp++;
  }
}

someLoop();                           // T5-1

setTimeout 示例2

如果这些对你都是小菜一碟，咳咳，你可以自己回去玩了，这里已经没有啥对你有价值的东西了，我们他日再叙。

如果你对这些代码有些疑惑，那可以坐下来一起探讨一下人生。

先看第一段:

//
function test1 () {
  console.log(1)
};

setTimeout(test1, 1000);                // T1-1
setTimeout(test1(), 1000);              // T1-2
setTimeout(console.log(1.1), 1000);     // T1-3

T1-1 这里是最常见的使用方法了, 这个就不用多说了，1s 以后输出 1；

===我是分割线===

T1-2 与 T1-1 的区别就是第一个参数不再是函数，而是函数调用。那是不是1s 以后再调用这个函数呢？在 chrome console 里看一下运行的结果

立即输出了1，又输出了33，1s 以后啥都没有。

这里有3个小问题：1是咋输出的；33是咋输出的；1s 以后啥都没有又是咋回事。

先说33，注意最上边 “// 1” 左边有一个向右的箭头，这代表你在 console 里输入的代码；33左边有一个向左的箭头，这个意思是代码执行后返回的值；33上面两个横线中间的值没有左箭头也没有右箭头，是代码里 console.log() 打印的结果。

这里33代表着 setTimeout() 方法的返回值，返回的是一个计时器，可以用来以后取消定时用的，这个33就是定时器的 id。这里对我们代码的执行并没有啥意义，下面就忽略这个计时器的 id 了。

要想说清楚输出1和1s 以后啥都没有的问题，必须先说说 JavaScript 里的事件循环机制了。

setTimeout(fn, delay) 是在指定时间以后，将 fn 推入到事件循环的消息队列当中去，然后 js 执行引擎跑完执行栈里的代码以后，就立即从这个消息队列里依次取出函数来执行。

这个将 fn 推入消息队列的函数用 js 模拟类似这样：

function pushToMessageQueue(fn){
  console.log(fn);
  if(fn && Object.prototype.toString.call(fn).toLowerCase() === '[object function]') {
    // add fn to Message Queue
    // ......

  }
}

// 我并没有研究过浏览器底层代码实现，如有错误，还请留言指出，谢谢。

执行 setTimeout(fn, delay) 的时候，底层调用这个方法，将 fn 作为参数传递进去。

于是，当我们执行 setTimeout(test1(), 1000) 的时候，底层实际上将 test1() 作为参数传递给 pushToMessageQueue(fn) 函数。

这实际上发生了两件事情：

1，将 test1() 作为参数赋值给 fn；类似于这样：

var fn = test1();

2，运行 pushToMessageQueue 函数逻辑。

在第一步里进行参数传递的时候，实际上是立即执行了 test1()，并将返回值赋值给fn。所以才会立即打印 1。test1 函数并没有返回值，默认返回 undefined，于是 pushToMessageQueue 函数的实际参数是 undefined，于是就没有任何东西被推进执行栈里，所以1s 以后就啥都没有执行。

至此，T1-2的疑问得到解决。了解了这些，再理解接下里的几种情况就容易许多。

===我是分割线===

T1-3 与 T1-2 很像，不过一个是函数调用，一个是语句，但它们运行的过程都是类似的。先把 console.log(1.1) 赋值给 fn，于是立即打印出 1.1，fn 的值为 undefined，于是1s 以后啥都没有执行。

第一段代码输出结果如下：（忽略计时器 id）

===我是分割线===

下面看第二段：

//
function test2(value) {
  value = value || 'default 2';
  console.log(value);
}

setTimeout(test2, 1000, 2.1);           // T2-1
setTimeout(test2(), 1000, 2.2);         // T2-2
setTimeout(test2(2.3), 1000, 2.31);     // T2-3

T2-1 与 T1-1 的区别是多了一个参数 2.2，setTimeout(fn, delay) 常见的写法就是两个参数，一个是要执行的函数，一个是延迟时间，多余的参数什么意思呢？看一下 MDN 上的资料（中文资料在此）

var timeoutID = scope.setTimeout(function[, delay, param1, param2, ...]);
var timeoutID = scope.setTimeout(function[, delay]);
var timeoutID = scope.setTimeout(code[, delay]);

这里的 scope 默认是 window。

这家伙有3种用法：

第二种用法，就是最常见的用法；

第三种用法，第一个参数是一个字符串，执行的时候解析为 js 语句再执行。这个用法已经不推荐了，完全可以用第二种代替。

第一种用法，就是在第二种之上加了更多的参数，这些参数会在第一个参数函数 fn 执行的时候作为参数传递，即 fn(param1, param2, param3) 这样。

于是 T2-1 意思就是 1s 以后执行 test2(2.1)，结果就是1s 以后打印 2.1。

===我是分割线===

T2-2 与 T1-2 类似，立即执行 test2()，打印 default 2，由于 test2 函数并没有返回值，1s 以后也不会有任何函数被推入消息队列，多余的参数也没有意义。

===我是分割线===

T2-3 里 test2 带了一个参数2.3，立即打印2.3，1s 以后啥都没有。

第二段代码输出结果如下：

===我是分割线===

第三段：

//
function test3(value) {
  value = value || 'default 3';
  console.log(value);

  return test3;
}

setTimeout(test3, 1000, 3.1);           // T3-1
setTimeout(test3(), 1000, 3.2);         // T3-2
setTimeout(test3(3.3), 1000, 3.31)      // T3-3

T3-1 比较好理解，1s 以后执行 test3，并传入参数 3.1，实际执行的是 test3(3.1)，所以1s 以后打印3.1；执行以后返回的 test3 没有被任何变量接收。

===我是分割线===

T3-2 立即执行 test3()，立即打印 default 3，并将返回值 test3 推入消息队列，1s 以后执行 test3(3.2)，打印 3.2；

===我是分割线===

T3-3 立即执行 test3(3.3)，立即打印 3.3，并将返回值 test3 推入消息队列，1s 以后执行 test3(3.31)，打印 3.31；

第三段代码输出结果如下：

===我是分割线===

第四段：

//
for(var i = 0; i < 5; i++) {            // T4-1
  console.log(i);
}

for(var i = 0; i < 5; i++) {            // T4-2
  setTimeout(function() {
    console.log(i);
  }, 1000 * i);
}

for(var i = 0; i < 5; i++) {            // T4-3
  setTimeout(function(i) {
    console.log(i);
  }, 1000 * i);
}

for(var i = 0; i < 5; i++) {            // T4-4
  (function(i) {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })(i);
}

for(var i = 0; i < 5; i++) {            // T4-5
  (function() {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })(i);
}

for(var i = 0; i < 5; i++) {            // T4-6
  setTimeout((function(i) {
    console.log(i);
  })(i), i * 1000);
}

T4-1:

输出 0 1 2 3 4

===我是分界线===

T4-2：

前面说到，setTimeout(fn, delay) 是在 delay 后将 fn 推入消息队列，等主进程执行完执行栈中的代码以后再执行执行消息队列里的回调。这里 for 循环就是执行栈中的代码，setTimeout 第一个参数里的回调都在指定时机被推入消息队列，循环完毕以后再执行。而此时的 i 已经变成了5，因此，打印结果是，立即打印一个5，然后接下来每秒再打印一个5。一共5个5。

5 （1s 后）5（2s 后）5 （3s 后）5 （4s 后）5

===我是分界线===

T4-3：

和上一个的区别是，回调里多了一个 i 参数。但在执行的时候并没有实参传递给这个回调，因此 i 就是 undefined，输出结果跟上一个类似，只是把 5 换成了 undefined。

undefined （1s 后）undefined（2s 后）undefined （3s 后）undefined （4s 后）undefined

===我是分界线===

T4-4：

循环体内部变成了一个立即执行函数，并把 i 作为参数传递。于是就利用闭包保存了对每一个 i 的引用。

0 （1s 后）1（2s 后）2 （3s 后）3 （4s 后）4

===我是分界线===

T4-5

与上一个的区别是，循环体内的立即执行函数没有形参，于是传递的参数 i 就没有参数来接收，于是匿名函数内部的 i 引用的其实都是外面循环里的 i。本质上和 T4-2并没有区别，输出也是一样的。

5 （1s 后）5（2s 后）5 （3s 后）5 （4s 后）5

===我是分界线===

T4-6

setTimeout 的第一个参数变成了一个立即执行函数，这和 T1-2 是类似的，只不过外部多了一个循环而已。

0 1 2 3 4 （1s 后）无输出

第四段 输出如下

===我是分界线===

第五段

//
function someLoop(){
  var tag = true;
  var temp = 0;

  setTimeout(function(){
    tag = !tag;
    console.log(tag)
  }, 1000);

  while(tag) {
    temp++;
  }
}

someLoop();                           // T5-1

根据上面的分析，这个应该很好理解。这段代码是个死循环，永远不会输出。

结果：

参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop