Ajax内部For循环

Ajax Inside For Loop

本文关键字：循环 For 内部 Ajax      更新时间：2023-09-26

在一个chrome扩展，我写我需要验证一些对象，我已经存储在localStorage对我的服务器。为此，我创建了一个For循环，它只是为每个localstorage元素发送数据，并且需要对响应执行一些操作。代码是这样的:

 for (var key in localStorage) {
        if (! some condition )
                      continue;
        var httpRequest = new XMLHttpRequest();
        httpRequest.onreadystatechange = function() {
            if (httpRequest.readyState === 4 && httpRequest.response == 200) {
                do something with 'key' from the for loop
            }
        }
        };
        var url = BASE_PATH ;
        httpRequest.open("POST", url);
        httpRequest.send(some data);
                     }

然而，在调试时似乎在ajax响应中，从for循环的"键"不是我需要的键:我期望从匹配每个ajax调用的for循环中获得相同的键，我得到的是所有ajax调用的相同键。是我做错了什么，还是期待着不可能的事情?我认为，由于ajax是在一个闭包函数内，值保存在内存或类似的东西。

提取实际的Ajax调用到一个单独的函数:

function AjaxCall( key ) {
  var httpRequest = new XMLHttpRequest();
  httpRequest.onreadystatechange = function() {
    if ((httpRequest.readyState === 4) && (httpRequest.response == 200)) {
      do something with 'key' from the for loop
    }
  };
  var url = BASE_PATH ;
  httpRequest.open("POST", url);
  httpRequest.send(some data);
}
for (var key in localStorage) {
  if ( some condition ) {    
    AjaxCall( key );
  }    
}

原因是，您正在创建一个传递给onreadystatechange的函数的闭包。所有这些函数都指向同一个key变量，该变量在循环结束后仅为所有Ajax调用保存一个(最后一个)值。

当您创建一个单独的函数(如我的示例中的AjaxCall())时，您为每个调用创建不同的上下文，因此所有回调都指向不同的键。

相关文章：