多个 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 是一个教程。