JavaScript поведение ajax

Question

Это мой первый вопрос, любые предложения по дальнейшим вопросам будут оценены.

При использовании следующего кода для обновления таблицы я не вижу никаких обновлений, однако при перемещении TableList = {} вФункция успеха, таблица будет обновляться, как и предполагалось.

Может кто-нибудь дать мне объяснение, почему мне нужно перенести опустошение объекта в блок успеха?

Ответы, которые я прочитал, донКажется, это не помогает мне лучше понять.

function GetTableData() {
    TableList = {};

    $.ajax({
        url: "http://localhost:3000/info/",
        success: function (result) {

            //Moiving 'TableList = {}' here works fine

            for (var i = 0; i < result.length; i++) {

                TableList[i] = result[i];

            }
        }
    });
}

function UpdateTable() {
    GetTableData()
    //Update table cells
    setTimeout(function () {
        UpdateTable();
    }, 1000);
}

Answer 1

$. Ajax является асинхронным, поэтому ответ приходит «позже»

Вы вызываете GetTableData () ...

• Первое, что он делает, это ясно TableList
• Второе, что он делает, - это начинает асинхронный вызов
• , затем возвращает
• Затем ваш код обновляется с использованием EMPTY TableList (потому что он еще не был заполнен)
• Некоторое время спустя, TableList заполняется
• секунду спустя, повторите бесплодную петлю

Одно из решений это

function GetTableData(callback) {
    $.ajax({
        url: "http://localhost:3000/info/",
        success: callback
    });
}

function UpdateTable() {
    GetTableData(function(TableList) {
        //Update table cells
        setTimeout(UpdateTable, 1000);
    });
}

Теперь происходит следующее

• call GetTableData ()
• ajax запускается
• при получении данных, функция успеха вызывает обратный вызов с ответом в качестве первого аргумента
• ваш обратный вызовкод обновляет ячейки таблицы
• , затем запускает timeOut, чтобы повторить все это снова