脚本其余部分完成后，AJAX调用完成

Question

我有一个AJAX调用，用于从数据库中获取列表的条目。因此，我从Ajax调用中接收到数据，但是它们有些“延迟”，因此其余操作在完全加载必要的数据之前开始（请参见屏幕截图）。有没有办法在Ajax数据完全加载以使用所有信息之前暂停脚本？是否由于“ asynchronus = true”而发生？

很高兴得到一些答案，谢谢！

控制台显示以下内容：

我试图重新排序脚本，但是没有什么真正改变问题的地方。

var data_array = [];
var data = [];
var output = document.getElementById('entry-list');
/*Static Data Variables for Data Call*/
var name;
var priority;
var category;
var expiry;
/*Call AJAX*/
var ajax = new XMLHttpRequest();
var method = "GET";
var url = "getdata.php";
var asynchronous = true;
ajax.onreadystatechange = function()
{
    if (this.readyState == 4 && this.status == 200) {
    /*getting return --> putting/convert json into array*/data.push(JSON.parse(this.responseText));
    console.log(data.length);

        for(var a = 0; a<data.length; a++){
             name = data[a].name;
             priority = data[a].priority;
             category = data[a].category;
             expiry = data[a].expiry;
             data_array.push("<li class='' id='list-item"+a+"' onclick='itemClick(this)'>"+name+" #"+a+", "+priority+"</li>");
            console.log("Array-entry added");
        }
    }
}
ajax.open(method, url, asynchronous);
//sending
ajax.send();
//recieving asnwer from getdata.php
console.log(data_array);
output.innerHTML = data_array;   

Answer 1

  

有没有办法暂停脚本

您在想这是错误的方式。与其尝试强制阻塞操作，不如重新构造代码以使用数据响应异步操作。基本上，//从getdata.php接收到响应之后的行应该在回调函数中，而不是在回调函数之后。

所以不要这样：

ajax.onreadystatechange = function()
{
    // the rest of your code
}
ajax.open(method, url, asynchronous);
ajax.send();
console.log(data_array);
output.innerHTML = data_array;

您将执行以下操作：

ajax.onreadystatechange = function()
{
    // the rest of your code

    console.log(data_array);
    output.innerHTML = data_array;
}
ajax.open(method, url, asynchronous);
ajax.send();

自然地，您的代码可能会变得比仅这两行更大，更复杂。如何组织更复杂的操作取决于您。但关键是这些操作应由AJAX函数的响应处理程序调用。

Answer 2

您可以使用jquery AJAX这样操作。

$.ajax({

            method:"POST",
            url:"URL",
            data: {name:value},
            success: function (responseText) {

              //CODE HERE RUN AFTER DATA FULLY LOADED

            }

        });