loops - Javascript for loop async - 循环内的JavaScript闭合--简单的实际例子

For setTimeout / javascript / closures

我的价值。3
我的价值。3
我的价值。3

var funcs = [];
//让我们创建3个函数
for (var i = 0; i < 3; i++) {
  //并将它们存储在funcs中
  funcs[i] = function() {
    //每个都应记录其值。
    console.log("My value: " + i);
  };
}
for (var j = 0; j < 3; j++) {
  //现在让我们每个人来看一下
  funcs[j]();
}
var buttons = document.getElementsByTagName("button");
//让我们创建3个函数
for (var i = 0; i < buttons.length; i++) {
  //作为事件监听器
  buttons[i].addEventListener("click", function() {
    //每个都应记录其值。
    console.log("My value: " + i);
  });
}
<button>0</button>
<br />
<button>1</button>
<br />
<button>2</button>
// Some async wait function
const wait = (ms) => new Promise((resolve, reject) => setTimeout(resolve, ms));

for (var i = 0; i < 3; i++) {
  // Log `i` as soon as each promise resolves.
  wait(i * 100).then(() => console.log(i));
}
const arr = [1,2,3];
const fns = [];

for(var i in arr){
  fns.push(() => console.log(`index: ${i}`));
}

for(var v of arr){
  fns.push(() => console.log(`value: ${v}`));
}

for(var f of fns){
  f();
}

Quentin



Answer #1
//覆盖console.log(),以便您可以看到控制台输出
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (var i = 0; i < 3; i++) {
    var ilocal = i; //创建一个新的局部变量
    funcs[i] = function() {
        console.log("My value: " + ilocal); //每个都应引用自己的局部变量
    };
}
for (var j = 0; j < 3; j++) {
    funcs[j]();
}
//覆盖console.log(),以便您可以看到控制台输出
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (var i = 0; i < 3; i++) {
  console.log(ilocal);
  var ilocal = i;
}
//覆盖console.log(),以便您可以看到控制台输出
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (var i = 0; i < 3; i++) {
    funcs[i] = (function() { //使用包装函数创建新作用域
        var ilocal = i; //将我捕获到本地变量中
        return function() { //返回内部函数
            console.log("My value: " + ilocal);
        };
    })(); //记住要运行包装函数
}
for (var j = 0; j < 3; j++) {
    funcs[j]();
}
//覆盖console.log(),以便您可以看到控制台输出
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (var i = 0; i < 3; i++) {
    funcs[i] = wrapper(i);
}
for (var j = 0; j < 3; j++) {
    funcs[j]();
}
//为内部函数创建一个单独的环境
function wrapper(ilocal) {
    return function() { //返回内部函数
        console.log("My value: " + ilocal);
    };
}
//覆盖console.log(),以便您可以看到控制台输出
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (let i = 0; i < 3; i++) { //使用“ let”声明“ i”
    funcs[i] = function() {
        console.log("My value: " + i); //每个都应引用自己的局部变量
    };
}
for (var j = 0; j < 3; j++) { //我们可以在此处使用“ var”而不会出现问题
    funcs[j]();
}