JavaScript函数调用顺序不正确

我试图简化代码，但是在这里我向api发出请求，它一切正常，直到我尝试调用函数4中的函数5，它将接收到的数据由api转换为function2。JavaScript函数调用顺序不正确

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

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); 
};

来源

2016-12-29 Jess

为什么不使用Promise？这样它就会真正异步。 – Baruch

@Baruch：它已经是真正的异步了。 –

您需要链接函数作为回调来处理流程 – Aethyn

您正在重复使用单个XMLHttpRequest对象。别。为每个请求创建一个新的（见***线）：

var counter = 0; 

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


var function1 = function() { 
    counter++; 
    var xhr = new XMLHttpRequest();     // *** 
    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'; 
     var xhr = new XMLHttpRequest();    // *** 
     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'; 
     var xhr = new XMLHttpRequest();    // *** 
     xhr.open("GET", url3); 
     xhr.addEventListener('load', function5); 
     xhr.send(); 
    }; 
}; 

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

还要注意的是function3创建几个重叠的请求（假设循环是有原因的循环），所以只是提防这一点。

线

for (var i in searchArray) {

是可疑。您没有显示searchArray，但如果它确实是阵列，for-in通常不是通过它循环的最佳方式。详情请参阅For-each over an array in JavaScript?。

来源

2016-12-29 15:06:52

谢谢，这个工作完美，并找到function3中的问题！ – Jess

'不要' - 一个真正简洁而全能的句子 –

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

此XHR对象已经在function1中添加了一个事件侦听器。
接下来，在函数3中添加一个附加的事件侦听器。
然后在函数4中的另一个事件监听器。

可能的解决办法：
1.使用每次不同的XHR对象：fn1XHR = new XMLHttpRequest()等。

除此之外，我觉得用一个承诺可以为你的方案更好的模式在这里描述。

来源

2016-12-29 15:09:58 UJC

JavaScript函数调用顺序不正确

回答

相关问题