for循环 嵌套延时器 实例及解决方案

Posted 2020-10-03 RoadAspen

 for循环 嵌套延时器 实例及解决方案

首先         看一个经典的for循环嵌套延时器的案例

for(var i = 0;i<lg;i++){// lg = 6
        setTimeout(function(){
            console.log(i); //此时输出为 6 个 6
        },1000)
    }

我们想要的结果是在for循环中一次打印出 i 的 值。即0，1，2，3，4，5；但是输出6个相同的个数字是什么原因呢?

这主传进去要是因为setTimeout的执行时异步执行的，而for循环的执行却非常的快，所以，在1s后执行定时器函数时， i  已经 循环到了最大值6，其他的i值已经被销毁，此时再执行定时器，则是把 i=6传进去了，所以造成了这样的结果。

那我们应该怎么解决这个问题呢？

解决这个问题首先是要解决 i 值的变量销毁问题，即浏览器的垃圾回收机制：

第一种方法：将延时器中的函数用一个自执行函数包起来，把每个循环中的 i 在被回收之前直接传入到自执行函数中，这样就可以避免被回收：如下：

for (var i = 0; i < lg; i++) {//lg = 6
            setTimeout((function(a) {
                console.log(a);//操纵变量a，和i无关 此时输出为0，1，2，3，4，5
            })(i), 1000);//将 i 作为变量传入

}

但是这样写会出现一个问题，函数直接打印了，并没有一秒的延迟，原因是将自执行函数放在定时器中，会直接执行，并不是1秒后再执行，所以在这种方法上做了一些改进，即第二种方法：

第二种方法：将延时器整个的包裹在一个子执行函数中，这样就相当于同时定义了6个延时1s的延时器：

for (var i = 0; i < lg; i++) {//lg = 6
        (function(a){//自执行函数，获取i
            setTimeout(function() {
                console.log(a);//操纵变量a，和i无关 此时输出为 0，1，2，3，4，5 且在1s延迟后输出
            }, 1000)
        })(i)
    }

这样就完美的解决问题了；如果你想要每隔一秒输出一个值，而不是同时输出，则可以将参数传进时间中：

 for (var i = 0; i < lg; i++) {//lg = 6
        (function(a){//自执行函数，获取i
            setTimeout(function() {
                console.log(a);//操纵变量a，和i无关 此时输出为 0，1，2，3，4，5 且在1s延迟后输出
            }, a*1000)//将 i 的值传进来 ，这样就可以每个一秒输出一个值
        })(i)
    }

 

setInterval定时器和setTimeout 不同，因为是执行次数的原因，不能将 i  的值传进时间中，会造成多次重复；