setitimeout函数为何在函数调用结束后仍是i的访问值

Question

function printSeries() {
	for (var i = 0; i < 10; i++) {
		setTimeout(function () {
			console.log(i);
		}, 3000);
	}
	console.log('printing');
}

printSeries();

为什么我的印刷价值是我的10倍？堆栈为空后，将调用SetTimeout回调函数。它是否在其中存储词汇范围？

Answer 1

当脚本第一次到达setTimeout时，它将您的功能添加到要在3秒钟后执行的队列中，然后立即继续循环。

[经过3秒的时间，循环已经很长时间了（简单循环的10次迭代不需要3秒），这就是为什么您这么早就能看到'printing'消息的原因。

这次，i为10，因此10被打印10次（因为这是该功能已添加到队列的次数。Javascript使用i的当前值，而不是函数首次添加到队列时的i值。

这里是脚本的修订版本，在将函数添加到队列时使用i的值：

function printSeries() {
  for (var i = 0; i < 10; i++) {

    setTimeout((function(i) {
      return function() {
        console.log(i);
      }
    }(i)), 3000);

  }
  console.log('printing');
}

printSeries();

这里，i的值绑定到该函数，而不仅仅是引用。