js经典面试问题：如何让for循环中的setTimeout()函数像预想中同样工做？

setTimeout()是js中的一类重要函数，将一段代码延迟必定时间并异步执行。可是这个函数常常不听话。在实践中，可能常常有人碰到相似下面的这种状况：

for (var i = 1; i <= 2; i++) {
    setTimeout(function() { alert(i) }, 100);
}

 

咱们指望的结果是，先隔100毫秒弹出1，再隔100毫秒弹出2。可是跑起来后，alert的两次内容都是数字3，并且紧挨着输出，并非本身所指望的先1后2。有一种很基础的面试题是，如何合理改动代码，使它返回指望的结果？

其实很简单。在stackoverflow上早有大神解释了，能够参考这个连接

答案翻译成中文以下（并作了部分修改方便理解）：

 

---------------------------------------------------------------------------------

 

你要为每一个定时器处理函数建立不一样的“i”变量副本。好比这样：

function doSetTimeout(i) {
  setTimeout(function() { alert(i); }, 100);
}

for (var i = 1; i <= 2; ++i)
  doSetTimeout(i);

 

若是你不作这样的事情 （这种方法在实际上也会有其余变种），每一个定时器处理函数就会共享同一做用域里的同一变量"i"。当循环完成时的"i"是多少？是3！这里经过定义一个函数来实现中介的做用，从而建立了变量的值的副本。因为setTimeout()是在该副本的上下文中调用的，因此它每次都有本身的私有的"i"以供使用。

 

可是随着时间的推移，这些代码的效果显得有些混乱是显而易见的事实，由于设立一些时间间隔相同的连续的setTimeout()将致使全部延时处理程序同时被调用。了解设置timer（对setTimeout()的调用）几乎不消耗时间是很重要的。也就是说，告诉系统“请在1000毫秒后调用此函数”将会被当即返回，由于在timer队列中安装延时请求的过程很是快。

 

所以，若是有一串连续的延时请求（好比我答案中的代码），并且每个时间延迟值是相同的，那么一旦通过足够的时间，全部延时处理程序将一个接一个快速连续调用。

 

若是你须要的是在固定时间间隔调用的处理程序，你可使用setInterval()，行为很是相似setTimeout()，但每通过必定时间就运行一次。或者你能够调用以“时间值乘以迭代计数器”为时间间隔的setTimeout。也就是说，修改我刚才的示例代码：

 

function doScaledTimeout(i) {
  setTimeout(function() {
    alert(i);
  }, i * 5000);
}

 

（100毫秒超时，效果不会很明显，因此我设置的数字高达5000）

“i”值乘以基础延迟值，因此循环5次将致使分别延迟5秒，10秒，15秒，20秒，和25秒。