Вызов 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

Есть ли способ приостановить выполнение сценария

Вы думаете об этом неправильно.Вместо того, чтобы пытаться заставить операции блокировать, вместо этого реструктурируйте свой код, чтобы использовать данные в ответ на асинхронную операцию.По сути, строки после // получения asnwer из 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

            }

        });