var函数=[];//让我们创建3个函数对于(变量i=0;i<3;i++){//并将其存储在funcs中funcs[i]=函数(){//每个都应该记录其值。console.log(“我的值:”,i);};}对于(变量j=0;j<3;j++){//现在让我们逐一查看函数[j]();}
它输出以下内容:
我的价值:3我的价值:3我的价值:3
而我希望它输出:
我的值:0我的价值:1我的价值:2
当使用事件侦听器导致函数运行延迟时,也会出现同样的问题:
var buttons=document.getElementsByTagName(“button”);//让我们创建3个函数for(var i=0;i<buttons.length;i++){//作为事件侦听器buttons[i].addEventListener(“单击”,函数(){//每个都应该记录其值。console.log(“我的值:”,i);});}<按钮>0</按钮><br/><button>1</button><br/><按钮>2</按钮>
…或异步代码,例如使用Promises:
//一些异步等待函数const wait=(ms)=>new Promise((解析,拒绝)=>setTimeout(解析,ms));对于(变量i=0;i<3;i++){//一旦每个承诺得到解决,就记录“i”。等待(i*100)。然后(()=>console.log(i));}
在for in和for of循环中也很明显:
常量arr=[1,2,3];常量fns=[];用于(arr中的变量i){fns.push(()=>console.log(“index:”,i));}对于(arr的var v){fns.push(()=>console.log(“值:”,v));}for(arr常量){var obj={number:n};//或新的MyLibObject({…})fns.push(()=>console.log(“n:”,n,“|”,“obj:”,JSON.stringify(obj)));}for(fns的var f){f();}
这个基本问题的解决方案是什么?
如果您在while循环而不是for循环中遇到此类问题,例如:
变量i=0;而(i<5){setTimeout(函数){控制台日志(i);},i*1000);i++;}
关闭当前值的技术有点不同。在while块内声明一个带有const的块范围变量,并将当前i赋给它。然后,无论在何处异步使用该变量,都用新的块范围的变量替换i:
变量i=0;而(i<5){常量this迭代i=i;setTimeout(函数){console.log(thisIterationI);},i*1000);i++;}
对于不支持块作用域变量的旧浏览器,可以使用IIFE,调用i:
变量i=0;而(i<5){(函数(innerI){setTimeout(函数){console.log(innerI);},innerI*1000);})(i) ;i++;}
如果要调用的异步操作恰好是如上所述的setTimeout,则还可以使用第三个参数调用setTimeout以指示调用传递函数的参数:
变量i=0;而(i<5){setTimeout(设置超时)((thisIterationI)=>{//回调console.log(thisIterationI);},i*1000,//延迟i//获取传递给回调函数的值;成为此迭代I);i++;}
OP显示的代码的主要问题是,直到第二个循环才读取i。为了演示,想象一下在代码中看到一个错误
funcs[i] = function() { // and store them in funcs
throw new Error("test");
console.log("My value: " + i); // each should log its value.
};
在执行funcs[someIndex]()之前,错误实际上不会发生。使用相同的逻辑,应该很明显,直到这一点,i的值也不会被收集。一旦原始循环完成,i++将i值设为3,这导致条件i<3失败,循环结束。此时,i为3,因此当使用funcs[someIndex]()时,每次计算i时,i均为3。
要克服这一点,必须在遇到i时对其求值。注意,这已经以funcs[i]的形式发生(其中有3个唯一索引)。有几种方法可以获取此值。一种是将其作为参数传递给函数,该函数在这里已经以多种方式显示。
另一种选择是构造一个函数对象,它将能够在变量上关闭。这样就可以完成
jsFiddle演示
funcs[i] = new function() {
var closedVariable = i;
return function(){
console.log("My value: " + closedVariable);
};
};
如果您在while循环而不是for循环中遇到此类问题,例如:
变量i=0;而(i<5){setTimeout(函数){控制台日志(i);},i*1000);i++;}
关闭当前值的技术有点不同。在while块内声明一个带有const的块范围变量,并将当前i赋给它。然后,无论在何处异步使用该变量,都用新的块范围的变量替换i:
变量i=0;而(i<5){常量this迭代i=i;setTimeout(函数){console.log(thisIterationI);},i*1000);i++;}
对于不支持块作用域变量的旧浏览器,可以使用IIFE,调用i:
变量i=0;而(i<5){(函数(innerI){setTimeout(函数){console.log(innerI);},innerI*1000);})(i) ;i++;}
如果要调用的异步操作恰好是如上所述的setTimeout,则还可以使用第三个参数调用setTimeout以指示调用传递函数的参数:
变量i=0;而(i<5){setTimeout(设置超时)((thisIterationI)=>{//回调console.log(thisIterationI);},i*1000,//延迟i//获取传递给回调函数的值;成为此迭代I);i++;}