Javascript函数调用顺序不正确

我试图简化代码，但在这里我向api发出请求，在我尝试调用函数4中的函数5之前，一切都正常，在函数4中，它将api接收到的数据放入函数2中

有人知道如何阻止这种情况发生吗

var xhr = new XMLHttpRequest();
var counter = 0;

window.onload = function() {
    var add_button = document.getElementById('add_button');
    add_button.addEventListener('click', function1);


var function1 = function() {
    counter++;
    xhr.addEventListener('load', function2);
    var url = 'https://api.example.org/search';
    console.log(url);
    xhr.open("GET", url);
    xhr.send();
};

var function2 = function() {
    var data = JSON.parse(this.response);
    console.log(data);
    function3();
};

var function3 = function() {
    for (var i in searchArray) {
        var Url2 = 'https://api.example.org/search2';
        xhr.open("GET", Url2);
        xhr.addEventListener('load', function4);
        xhr.send();
    };
};

var function4 = function() {
    var data2 = JSON.parse(this.response);
    if (counter === 3) {
        var url3 = 'https://api.example.org/search3';
        xhr.open("GET", url3);
        xhr.addEventListener('load', function5);
        xhr.send();
    };
};

var function5 = function() {
    var data3 = JSON.parse(this.response);
};

---

您正在重用单个

XMLHttpRequest

对象。不要。为每个请求创建一个新的请求（请参见

***

行）：

还要注意，

function3

创建了几个重叠的请求（假设循环是有原因的循环），所以请注意这一点

---

线路

for (var i in searchArray) {

---

他很可疑。您没有显示

searchArray

，但如果它确实是一个数组，那么

for in

通常不是遍历它的最佳方式。有关详细信息，请参阅。

您看到的主要问题来自尝试重用同一个XHR对象

此XHR对象已在function1中添加了一个事件侦听器。
接下来，在function3中添加一个额外的事件侦听器。
然后是function4中的另一个事件侦听器

可能的解决方案：
1.每次使用不同的XHR对象：

fn1XHR=new XMLHttpRequest（）

等

---

除此之外，我认为对于您在这里描述的场景，使用承诺可能是一种更好的模式。

为什么不使用承诺？这样，它将是真正异步的。@Baruch:它已经是真正异步的。您需要将函数链接为回调来处理流。如果您正在重用xhr变量，我猜您所连接的两个侦听器都将被调用。@Baruch:使用承诺将是完全有效的。它也会（稍微）更复杂，除非您已经有了一个XHR包装器（这可能是个好主意）。但这不是重点。关键是你的评论造成了错误的对等。“这样它将是真正的异步”实际上是说，“你的方式不是真正的异步。”但确实如此。谢谢你，这非常有效，并且在function3中发现了问题<代码>不要。-一句真正简洁而有力的句子

for (var i in searchArray) {