首页 > 代码库 > js经典面试问题:如何让for循环中的setTimeout()函数像预想中一样工作?

js经典面试问题:如何让for循环中的setTimeout()函数像预想中一样工作?

可能经常有人碰到类似下面的这种情况:

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

跑起来后,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秒。

js经典面试问题:如何让for循环中的setTimeout()函数像预想中一样工作?