javascript - jQuery AJAX 函数看不到我的变量

Question

我有以下代码，经过简化，其中 $currEl 被记录并正确显示，但在 $.ajax 中调用它记录为 null。

我错过了什么吗？

for(var i=0, j = atgSlots.length; i < j; i++) {
 var currSlot = atgSlots[i].split('|'),
   $currEl = currSlot[0].length ? $('[data-atg-url=' + currSlot[0] + ']') : null,
   wcmLocation = currSlot[2] || null;

 if ($currEl !== null && wcmLocation !== null) {
  console.log($currEl);
  $.ajax({
   url: wcmLocation,
   success: function(html) { console.log($currEl); updateSlots.setContent($currEl, html); },
   error: updateSlots.checkDefault
  }); // $.ajax
 }
} // for : atgSlots

Answer 1

问题是你的ajax成功函数有一个对$currEl变量的实时引用，而不是它的副本该函数已创建。因此，所有这些成功处理程序都引用相同的变量，因此也引用相同的值 - 循环中分配给 $currEl 的最后一个值。这是一个非常非常简化的相同效果的示例:

var a;
a = "before";
setTimeout(function() {
    alert(a);
}, 10);
a = "after";

这会在“之后”而不是“之前”发出警报，因为 10 毫秒后调用的函数使用 a 的当前值。 See it in action .

您可以通过使用中间函数为每个函数提供自己的变量来引用来解决这个问题。这是一个极简的改变:

for(var i=0, j = atgSlots.length; i < j; i++) {
 var currSlot = atgSlots[i].split('|'),
   $currEl = currSlot[0].length ? $('[data-atg-url=' + currSlot[0] + ']') : null,
   wcmLocation = currSlot[2] || null;

 if ($currEl !== null && wcmLocation !== null) {
  console.log($currEl);
  $.ajax({
   url: wcmLocation,
   // ==== Change starts here
   success: (function($thisEl) {
     return function(html) { console.log($thisEl); updateSlots.setContent($thisEl, html); };
   })($currEl),
   // ==== Change ends here
   error: updateSlots.checkDefault
  }); // $.ajax
 }
} // for : atgSlots

它的作用是在每个循环上创建并调用一个工厂函数，并将 $currEl 的当前值传递给该函数。然后该函数返回应用作成功处理程序的函数。成功处理程序使用来自外部上下文的其他信息(html，我假设这些信息应该对所有这些信息都是通用的)，但使用 $thisEl (函数参数)而不是 $currEl。

这样做实际上稍微效率低下，因为我们创建了新工厂函数的多个相同副本。一个不那么简约——也许更清晰——的版本将如下所示:

for(var i=0, j = atgSlots.length; i < j; i++) {
 var currSlot = atgSlots[i].split('|'),
   $currEl = currSlot[0].length ? $('[data-atg-url=' + currSlot[0] + ']') : null,
   wcmLocation = currSlot[2] || null;

 if ($currEl !== null && wcmLocation !== null) {
  console.log($currEl);
  $.ajax({
   url: wcmLocation,
   success: buildSuccessHandler($currEl),
   error: updateSlots.checkDefault
  }); // $.ajax
 }
} // for : atgSlots

function buildSuccessHandler($thisEl) {
    return function(html) {
        console.log($thisEl);
        updateSlots.setContent($thisEl, html);
    };
}

(我假设所有这些代码都包含在某个函数中。)

有关闭包和此实时引用内容的更多信息，请参阅此博客文章:"Closures are not complicated" .