深入浅出:了解for循环中保留i值得方法
一、保留i值
通常情况下,因为一些效果我们需要获取到for循环中的i的值,但是往往拿到的都是最后一个i的值。下面介绍几种方法可以获取到i的值
1.自定义属性:
arr[i].index = i;
以一个事件为例
例如:
for(var i =0;i<arr.length;i++){
arr[i].index = i;
arr[i].onclick = funtion(){
var index = this.index;
console.log(index) // ===>1,2,3,4
}
}
2 自执行函数:
for(var i=0;i<5;i++){
(function(n){
setTimeout(function(){
console.log(n);
},1000)
})(i)}
==>0,1,2,3,4
3 闭包:
4 使用ES6语法中的let代替var关键字:
==>0,1,2,3
推荐链接:https://www.cnblogs.com/shipskunkun/p/5695784.html
二、延时器保留i值的方法
1. 先看一个经典的for循环嵌套延时器的案例
for (vari = 0; i < lg; i++) {// lg = 6
这主传进去要是因为setTimeout的执行时异步执行的,而for循环的执行却非常的快,所以,在1s后执行定时器函数时, i 已经 循环到了最大值6,其他的i值已经被销毁,此时再执行定时器,则是把 i=6传进去了,所以造成了这样的结果。
第一种方法:将延时器中的函数用一个自执行函数包起来,把每个循环中的 i 在被回收之前直接传入到自执行函数中,这样就可以避免被回收:如下:
第三种方法:因为ES6的let会在局部作用域内保留i值
这样就完美的解决问题了;如果你想要每隔一秒输出一个值,而不是同时输出,则可以将参数传进时间中:
setInterval定时器和setTimeout 不同,因为是执行次数的原因,不能将 i 的值传进时间中,会造成多次重复;