javascript closure in a for loop [duplicate]

删除回忆录丶 提交于 2019-12-11 23:01:52

问题


Possible Duplicate:
Javascript closure inside loops - simple practical example
Javascript: closure of loop?

so I would like the results to be 1,2,3 instead of 3,3,3. How do I set the context/scope so that the jobs are using the correctly scoped "i"?

function buildJobs(list) {
  var jobs = [];
  for (var i = 0; i < list.length; i++) {
    var item = list[i];
    jobs.push( function() {alert(item)} );
  }
  return jobs;
}

function testJobs() {
  var jobs = buildJobs([1,2,3]);
  for (var j = 0; j < jobs.length; j++) {
    jobs[j]();
  }
}

回答1:


Wrap the inner function with a another function that's immediately executed and receives i as an argument:

function buildJobs(list) {
  var jobs = [];
  for (var i = 0; i < list.length; i++) {
    var item = list[i];
    (function(i) {
      jobs.push( function() {alert(list[i])} );
    })(i);
  }
  return jobs;
}

You're now closing over the i that is local to the wrapper function, which is a different variable in each iteration. (In your original configuration each inner function was closing over the same variable (whose value was 3 by the time any of the functions ever executed).)




回答2:


When loops generate functions, they all share access to the same scope of variables. And there can only be one variable on the same name in a given scope. So they all use i from the loop, and use the current value of i when they execute. And after the loop runs, it will always be 3.

function buildJobs(list) {
  var jobs = [];
  for (var i = 0; i < list.length; i++) {
    (function(i) {
      var item = list[i];
      jobs.push( function() {alert(item)} );
    })(i);
  }
  return jobs;
}

So introduce a new scope that captures the current value of i just for that iteration. You now have a new scope for each function generated, each with a different value for i.




回答3:


function buildJobs(list) {
    var jobs = [];

    list.forEach( function( item ){
        jobs.push( function(){
            alert(item);
        });
    });

    return jobs;
}

forEach



来源:https://stackoverflow.com/questions/8661376/javascript-closure-in-a-for-loop

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!