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++;}

其他回答

最初的示例不起作用的原因是,您在循环中创建的所有闭包都引用了同一帧。实际上,一个对象上有3个方法,只有一个i变量。他们都打印出相同的值。

还有另一个解决方案:不要创建另一个循环,只需将this绑定到返回函数。

var函数=[];函数createFunc(i){返回函数(){console.log('我的值:'+i)//i的对数值。}.调用(this);}对于(var i=1;i<=5;i++){//5函数funcs[i]=创建Func(i);//调用createFunc()i=5次}

通过绑定它,也解决了问题。

您可以为数据列表(如查询js(*))使用声明性模块。在这些情况下,我个人认为声明性方法不太令人惊讶

var funcs = Query.range(0,3).each(function(i){
     return  function() {
        console.log("My value: " + i);
    };
});

然后,您可以使用第二个循环并获得预期的结果,也可以这样做

funcs.iterate(function(f){ f(); });

(*)我是query js的作者,因此倾向于使用它,所以不要将我的话作为仅针对声明性方法的所述库的建议:)

var funcs = [];
for (var i = 0; i < 3; i++) {      // let's create 3 functions
  funcs[i] = function(param) {          // and store them in funcs
    console.log("My value: " + param); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j](j);                      // and now let's run each one to see with j
}

通过ES6的新功能,可以管理块级范围:

var funcs = [];
for (let i = 0; i < 3; i++) {          // let's create 3 functions
    funcs[i] = function() {            // and store them in funcs
        console.log("My value: " + i); // each should log its value.
    };
}
for (let j = 0; j < 3; j++) {
    funcs[j]();                        // and now let's run each one to see
}

OP问题中的代码替换为let而不是var。