jQuery-刷新getJson调用

Question

Ok, so I'm using the below JS to query an API and populate a table. As per another post I saw on SO on each iteration of the loop in the success function it builds an array and then joins it in jQuery and appends it as a row in the table. This works cool:

   // get the JSON from the API
    $.getJSON( "helpers.php", {
        func: "results",
        days: "3",
    })
    .done(function( rows ) {
        $.each(rows, function() {
            // populate the table
            var r = new Array(), j = -1;
            var matchDate = this.date;
                r[++j] = '<tr>';
                r[++j] = '<td><small>' + this.teamname; + '</small></td>';
                r[++j] = '<td>' + this.teamscore; + '</td>';
                r[++j] = '</tr>';
            $('#table-results').append(r.join('')); 
        });
    });

What I want to do, is call this every 3 seconds. So I thought I'd wrap my getJson call in a setInterval function:

setInterval(function(){
    // get the JSON from the API
    $.getJSON( "helpers.php", {
        func: "results",
        days: "3",
    })
    .done(function( rows ) {
        $.each(rows, function() {
            // populate the table
            var r = new Array(), j = -1;
            var matchDate = this.date;
                r[++j] = '<tr>';
                r[++j] = '<td><small>' + this.teamname; + '</small></td>';
                r[++j] = '<td>' + this.teamscore; + '</td>';
                r[++j] = '</tr>';
            $('#table-results').append(r.join('')); 
        });
    });
},3000);

However, this obviously carries on 'appending' the rows. I want it to act like a table refresh, so it would essentially start the table again. How could I do this if I dont necessarily know the length of the table?

Answer 1

First you should consider using setTimeout instead of setInterval here and just call it again in your success method. If your request lasts longer than the interval, the request is executed again before the first one has finished, which could produce unexpected results. I like the article from JavaScript Garden about this topic.

To refresh the table without flickering you should empty the table just before repopulating it in your success method. The smoothest way would probably be if you assign IDs to the rows and really only update the rows instead of the whole table.

Here is an example:

function updateTable() {
    $.getJSON("helpers.php", {
        func: "results",
        days: "3",
    }).done(function(rows) {
        // Clear table (only if you have to recreate the whole table)
        // The code below just updates the rows, so this isn't needed.
        //$('#table-results').empty();

        $.each(rows, function() {
            var rowID = this.date; // Use an appropriate ID
            var existingRow = $('#' + rowID);

            // If row does already exist, update it; otherwise create a new one.
            if(existingRow.length > 0) {
                existingRow.find('.teamname').html(this.teamname);
                existingRow.find('.teamscore').html(this.teamscore);
            } else {
                $('#table-results').append([
                    '<tr id="', rowID, '">',
                        '<td><small class="teamname">', this.teamname, '</small></td>',
                        '<td class="teamscore">', this.teamscore, '</td>',
                    '</tr>'
                ].join(''));
            }
        });

        setTimeout(updateTable, 3000);
    });
}

updateTable();