代码之家  ›  专栏  ›  技术社区  ›  James

避免在Javascript循环中修改闭包[重复]

  •  0
  • James  · 技术社区  · 6 年前

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

    我的价值:3
    我的价值:3
    我的价值:3

    但是我想输出:

    我的值:0
    我的价值:1
    我的价值:2


    当使用事件侦听器导致函数运行延迟时,也会出现同样的问题:

    var buttons = document.getElementsByTagName("button");
    // let's create 3 functions
    for (var i = 0; i < buttons.length; i++) {
      // as event listeners
      buttons[i].addEventListener("click", function() {
        // each should log its value.
        console.log("My value: " + i);
      });
    }
    <button>0</button>
    <br />
    <button>1</button>
    <br />
    <button>2</button>

    或异步代码,例如使用Promises:

    // 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));
    }

    这个基本问题的解决办法是什么?

    0 回复  |  直到 5 年前