jQuery - обновить вызов getJson

Question

Итак, я использую приведенную ниже JS для запроса API и заполнения таблицы. В соответствии с другим сообщением, которое я видел на SO на каждой итерации цикла в функции успеха, он строит массив, а затем соединяет его в jQuery и добавляет его в виде строки в таблице. Это работает холодно:

// 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('')); 
     }); 
    }); 

Что я хочу делать, это вызов каждые 3 секунды. Так я думал, что обернуть getJson вызов в setInterval функции:

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); 

Однако, это, очевидно, несет на «добавляющим» строк. Я хочу, чтобы он действовал как обновление таблицы, поэтому он снова запустит таблицу. Как я могу это сделать, если я не обязательно знаю длину таблицы?

Answer 1

Прежде всего, вы должны подумать о том, чтобы использовать setTimeout вместо setInterval и просто назовите его еще раз в своем методе успеха. Если ваш запрос длится дольше, чем этот интервал, запрос выполняется еще до завершения первого, что может привести к неожиданным результатам. Мне нравится article from JavaScript Garden по этой теме.

Чтобы обновить таблицу без мерцания, вы должны очистить таблицу перед ее повторным использованием в своем методе успеха. Самый гладкий путь, вероятно, был бы, если вы назначаете идентификаторы для строк и действительно только обновляете строки вместо всей таблицы.

Вот пример:

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();