js--ES6-Promise与经典循环闭包题

• 首先一开始是下面这样子的：
  for (var i = 0; i < 5; i++) {
  setTimeout(function() {
  console.log(new Date, i);
  }, 1000);
  }
  console.log(new Date, i);
  上面的代码等同于：
  for (var i = 0; i < 5; i++) {
  function xxx() {
  console.log(new Date, i);
  }
  setTimeout(xxx, 1000);
  }
• 注意：setTimeout里面传入的第一个匿名函数，等价于在setTimeout语句外面定义的一个函数。所以它的闭包范围是变量i所在的作用域，所以可以访问到i.
• 解析：大家都知道 i 是外面的变量，所有的setTimeout里面的函数都会指向同一个 i ,所以最终输出：

Sat Mar 25 2017 12:40:11 GMT+0800 (中国标准时间) 5
undefined
VM87:3 Sat Mar 25 2017 12:40:12 GMT+0800 (中国标准时间) 5
VM87:3 Sat Mar 25 2017 12:40:12 GMT+0800 (中国标准时间) 5
VM87:3 Sat Mar 25 2017 12:40:12 GMT+0800 (中国标准时间) 5
VM87:3 Sat Mar 25 2017 12:40:12 GMT+0800 (中国标准时间) 5
VM87:3 Sat Mar 25 2017 12:40:12 GMT+0800 (中国标准时间) 5

• 下面改造开始：要让控制台能够输出1234

1. 可以用闭包：（每次把新的变量i传进一个匿名的立即执行函数，每次 j
   都能得到不同的 i ，因为j在匿名函数的作用域内，函数的执行作用域每执行一次都会重新生成，所以每次的 j 都不是同一个）
   for (var i = 0; i < 5; i++) {
   (function(j) { // j = i
   setTimeout(function() {
   console.log(new Date, j);
   }, 1000);
   })(i);
   }

           console.log(new Date, i);
   

2. 可以用传参法：（其实是把闭包的匿名函数扩展出来）
   function wrapper(j) {
   // function fn() {
   // console.log(new Date, j);
   // }
   // setTimeout(fn,1000);
   // 上面全部的写法，等价于：
   setTimeout(function () {
   console.log(new Date, j);
   },1000);
   }
   for (var i = 0; i < 5; i++) {
   wrapper(i);
   }
   console.log(new Date, i);
   输出如下：

Sat Mar 25 2017 13:20:57 GMT+0800 (中国标准时间) 5
undefined
VM94:8 Sat Mar 25 2017 13:20:58 GMT+0800 (中国标准时间) 0
VM94:8 Sat Mar 25 2017 13:20:58 GMT+0800 (中国标准时间) 1
VM94:8 Sat Mar 25 2017 13:20:58 GMT+0800 (中国标准时间) 2
VM94:8 Sat Mar 25 2017 13:20:58 GMT+0800 (中国标准时间) 3
VM94:8 Sat Mar 25 2017 13:20:58 GMT+0800 (中国标准时间) 4

注意：这里有一个容易犯错的点，setTimeout的第一个参数要求的是一个函数的引用，而不是执行一个函数，所以只能传入函数名xxx的形式，而不能传入xxx(a,b)，这也意味着不能在xxx上直接传参。

• 所以，要传参的话，只能在setTimeout外面再包裹一层函数，然后定制编写xxx函数。

再补充一个重要知识点，如果一定要在xxx中传参，又不想用闭包，可以使用setTimeout的第3个参数，从第3个参数往后的参数，都会传入xxx里作为形参使用。

• 例如：上面的代码也可以写成：
  setTimeout(function(j) {
  console.log(new Date, j); //可以输出01234
  }, 1000 ,i);
• 如果硬是在setTimeout()中传入的xxx()的形式，那么只会以正常任务的方式立即执行xxx()，而不会放入任务队列里去，也就是定时器失效。
• 例如：
  for (var i=0; i<5; i++){
  function xxx(j) {
  console.log(new Date,j)
  }
  setTimeout(xxx(i),1000);
  }
  console.log(new Date, i);
  以上代码的输出如下：

Sat Mar 25 2017 13:37:27 GMT+0800 (中国标准时间) 0
VM2209:3 Sat Mar 25 2017 13:37:27 GMT+0800 (中国标准时间) 1
VM2209:3 Sat Mar 25 2017 13:37:27 GMT+0800 (中国标准时间) 2
VM2209:3 Sat Mar 25 2017 13:37:27 GMT+0800 (中国标准时间) 3
VM2209:3 Sat Mar 25 2017 13:37:27 GMT+0800 (中国标准时间) 4
VM2209:7 Sat Mar 25 2017 13:37:27 GMT+0800 (中国标准时间) 5
undefined

• 解析：可以看到，所有时间几乎是同一时刻输出的，而且是按012345的顺序，最后退出函数返回undefined，也就是说在退出函数前，setTimeout里的xxx就已经执行了，并没有进入任务队列。由此可以说明，setTimeout的第一个参数期待的是函数名，而不是一个函数的执行。
  • 当然，如果xxx()执行后返回的是一个函数，理论上也可以设置定时器函数，但传参又出现问题，太过复杂，现实暂时没有遇到必须这样的问题，不作讨论。

ES6及Promise登场

• 上述还可以用ES6及Promise来实现，具体如下：
  var tasks=[];
  function output(j) {
  var promise = new Promise( function(resolve, reject) {
  setTimeout(function () {
  console.log(new Date(), j);
  resolve(j);
  // console.log("这是一个小补充哟"+j);
  },1000 * i);
  });
  promise.then(function (j) {
  // console.log("这是then里的一点小补充哟"+j);
  });
  return promise;
  }
  for (var i=0;i<5;i++){
  tasks.push(output(i)); //执行顺序:首先在这里将定时器设置好，
  // 也就是循环设置定时器，由于执行时间很快，每次循环的间隔可以忽略不计，
  // 所以可以认为是设置了5个时间分别为0~4s的定时器，已经开始计时。
  // 计时后返回promise对象，放在tasks数组中
  }
  // 最后，在这里相当于是一个总的监听器，当前面4个任务都resolve以后，执行最后一个设置定时器任务，
  // 到时间以后，执行输出5
  // 关于执行顺序，前4个task是靠定时器的时间差别来决定先后输出顺序的，最后一个5的task，是依靠异步回调来执行的。
  Promise.all(tasks).then(function () {
  setTimeout(function () {
  console.log(new Date(), i);
  },1000);
  });
• 解析：// 关于任务队列：
  // 首先第一趟主任务队列走下来，执行了设置定时任务，将promise对象放入tasks数组，并设置好then回调的工作。
  // 然后第二趟，执行定时任务队列，运行consolo.log语句，
  // 然后遇到resolve，需要调用相应的then里面的回调语句（如果有的话）。
  // 但是注意，这里调用then的时机，是在本次任务的主代码执行完毕后，
  // 也就是说，如果setTimeout语句中的resolve()后面还有执行语句，要先执行那些语句，最后才执行resolve对应的then回调。
• 要确定resolve相应的回调语句的执行顺序，可以看下面的输出结果（将代码里的两句console.log去掉注释即可）：

Sat Apr 01 2017 13:15:47 GMT+0800 (中国标准时间) 0
(index):41 这是一个小补充哟0
(index):45 这是then里的一点小补充哟0
(index):39 Sat Apr 01 2017 13:15:48 GMT+0800 (中国标准时间) 1
(index):41 这是一个小补充哟1
(index):45 这是then里的一点小补充哟1
(index):39 Sat Apr 01 2017 13:15:49 GMT+0800 (中国标准时间) 2
(index):41 这是一个小补充哟2
(index):45 这是then里的一点小补充哟2
(index):39 Sat Apr 01 2017 13:15:50 GMT+0800 (中国标准时间) 3
(index):41 这是一个小补充哟3
(index):45 这是then里的一点小补充哟3
(index):39 Sat Apr 01 2017 13:15:51 GMT+0800 (中国标准时间) 4
(index):41 这是一个小补充哟4
(index):45 这是then里的一点小补充哟4
(index):60 Sat Apr 01 2017 13:15:52 GMT+0800 (中国标准时间) 5

最后强调一遍，resolve的回调函数是在本轮“事件循环”结束时执行，setTimeout(fn, 0)在下一轮“事件循环”开始时执行。

• 如果觉得上面的例子太复杂，看下面：
  setTimeout(function () {
  console.log('three');
  }, 0);

    Promise.resolve().then(function () {
      console.log('two');
    });
   
    console.log('one');
    // one
    // two
    // three