迭代期间的回调范围

Question

我知道有很多关于回调、范围和闭包的问题。如果这是重复的，我提前道歉。

我有一个each 循环，它调用一个执行多个异步操作的函数，然后发出回调。当回调触发时，我（显然）失去了范围。我所做的是将循环中的项目传递给函数，然后在回调中返回它，这样我就有了我需要的范围。这是最好的方法吗？我并不是在寻找过于复杂的东西。我只是想确保我不会遇到任何“陷阱”。

function doSomething(varA, varB, self, callback) {
  // do a lot of ajax stuff
  callback(varA + varB, self);
}

$.each( $('.selected'), function(i, item) {
  doSomething('a', 'b', item, function(retVal, self) {
    // process retVal and self
  }
}

Answer 1

你所得到的看起来不错，但有一件事：使用 $.each() 而不是 .each()。试试这个：

$('.selected').each(function(i, item) {
  doSomething('a', 'b', item, function(retVal, self) {
    // process retVal and self
  }
}

Answer 2

如果您不需要元素引用内部 doSomething，您可以用这种稍微整洁的方式创建一个闭包：

function doSomething(varA, varB, callback) {
  // do a lot of ajax stuff
  callback(varA + varB);
}

$.each( $('.selected'), function() {
  var self = this;
  doSomething('a', 'b', function(retVal) {
    // process retVal and self
  }
});

Answer 3

人们在使用 ajax 和循环时遇到的主要“问题”是尝试重用稍后执行的函数内的迭代变量。例如，

for (var i in col) {
  $.ajax({
    url: '...' + i + '.html',
    success: function() {
      console.log(i);  // Why is i different???
    }
  });
}

出现此“陷阱”是因为所有 success 回调之间共享 1 个 i 实例。

在您的场景中，每个“迭代”级别都有一个 i 。所以这个陷阱不会击中你。

Answer 4

由于 callback 是在 .each() 函数中定义的，因此当您到达回调函数时，item 仍然在范围内。因此，如果 doSomething() 从不使用 self，则无需传递它。您可以只引用 item：

function doSomething(varA, varB, callback) {  
  // do a lot of ajax stuff  
  callback(varA + varB);  
}  

$('.selected').each(function(i, item) {  
  doSomething('a', 'b', function(retVal) {  
    // process retVal and item
  });
});

现在，如果回调是在 .each() 之外定义的，您必须按照自己的方式进行操作，传递 item 到 doSomething()：

function doSomething(varA, varB, self, callback) {  
  // do a lot of ajax stuff  
  callback(varA + varB, self);  
}  
function doSomethingCallback(retVal, self) {  
  // process retVal and item
}

$('.selected').each(function(i, item) {  
  doSomething('a', 'b', item, doSomethingCallback);
});