多个XMLHttpRequests JavaScript

Question

我有以下代码：

for(var i=0;i<searchParamLength;i++)
{
    (function(i){
    url = "https://www.googleapis.com/customsearch/v1?q=" + searchParam[i] + "&cx=005894674626506192190:j1zrf-as6vg&key=AIzaSyCanPMUPsyt3mXQd2GOhMZgD4l472jcDNM&dateRestrict=" + date_length;

        arrXhr[i] = new XMLHttpRequest();

        arrXhr[i].open("GET", url, true);

        arrXhr[i].onreadystatechange = function(){

        var totalResults = 0;

        if (arrXhr[i].readyState === 4 && arrXhr[i].status == 200) 
        {
            totalResults = JSON.parse(arrXhr[i].responseText).searchInformation.totalResults;

            console.log("Variable I: " + i + "Total results:" + totalResults);

            totalResultsArr.push(totalResults);
        }           

        };

        arrXhr[i].send(null);

        })(i);

 }

在我的循环中查看我有一个console.log（）。我在代码中遇到了一些奇怪的行为，这就是我决定检查循环是否按预期运行的原因。确实，请看下面的图片。循环以奇怪的方式执行。它首先执行i = 1然后i = 6然后i = 2，等等。

我一直在研究SO而且我看到了以下question但它并没有帮助我解决我的问题。任何人都知道为什么会发生这种情况？

Answer 1

请求是异步的。我们无法保证它们会按照您使用它们的顺序完成 - 这就是为什么您在回调中没有看到i的连续值。

Answer 2

JS在发送请求后继续运行，onreadystatechange甚至在您收到回复时发生。接收响应所需的时间可能因连接状态，服务器处理时间，服务器负载等而异。因此响应顺序不一定是请求的顺序。

您可以选择进行同步通话。这是由xhr.open

的第三个参数决定的

arrXhr[i].open("GET", url, false);

在这种情况下，程序略有不同。

Here是一个教程。