JavaScript ajax行为

Question

This is my first question, any suggestions on further questions will be appreciated.

When using the following code to update a table I don't see any updates, however when moving the TableList = {} into the success function, the table will update like intended.

Can someone give me an explanation to why I need to move the emptying of the object into the success block?

Answers I've read don't seem to help me understand any better.

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 is asynchronous, so the response comes "later"

You call GetTableData() ...

• first thing it does is clear TableList
• second thing it does is begin the asynchronous call
• then it returns
• Your code then updates using the EMPTY TableList (becuase it hasn't been filled yet)
• some time later, TableList is filled
• a second later, repeat the fruitless loop

One solution is this

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

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

Now the following happens

• call GetTableData()
• ajax starts
• when data is received, the success function calls the callback with the response as the first argument
• your callback code updates the table cells
• then initiates a timeOut to repeat the whole thing again