javascript - 在循环中定位异步 AJAX 调用中的元素

Question

我想知道使用 jquery 循环 html 元素时异步调用是如何工作的。我知道当进行服务器调用时，异步调用不会停止迭代。这意味着，即使调用的响应尚未完成，脚本也会立即按顺序迭代下一个元素。

我的问题是，在每次调用时我都设置了不同的值，如下所示:

$(".businessUnit").each(function (index) {
      var $element = $(this);
      var iUCBU_KEY = $element.prop('data-iucbu_key');
      var iENTE_KEY = $element.prop("data-iente_key");

$.ajax({
      method: 'post',
      url: '/CodeBase/LoadInsertCATETE_BASE1/',
      data: {
        iUCBU_KEY: iUCBU_KEY,
        iENTE_KEY: iENTE_KEY
      },
      success: function (response) {
        //will there be $element from sequence when call was made?
          $element.find('input.price').val(response.price);

      },
      error: function (response) {

      }
    });      
});

哪个 $element 将被更新？它将是进行调用的 $element 还是当前迭代中的 $element？来自服务器的响应可能需要几秒钟，因此迭代可以在调用 - 响应之间进一步深入几个元素。

Answer 1

ajax 调用中的 $element 将具有发出 ajax 调用时的值。

这是因为 .each( 中使用的回调在其整个内容上形成了 closure。

如果你要做类似的事情:

const businessUnits = $(".businessUnit");

for (let i = 0; i < businessUnits.length; i++){
    var $element = $( businessUnits[i] );
.
.
.
    $.ajax(....)
}

那么 $element 的值很可能是最后一个元素。