jQuery: ポーリングについて

Question

前提

ポーリングでリアルタイム更新っぽい事をしようとしています。
コード

$(function() {
    var POLLLING_INVERVAL_TIME_IN_MILLIS = 10000;//10s
    (function polling() {
      if(!document.hidden) { // このページが表示されているときだけリクエストする
          getCountUp();
      }
      window.setTimeout(polling, POLLLING_INVERVAL_TIME_IN_MILLIS);
    }());
  
  
    function getCountUp() {
    $.ajax({
        url: "/memos",
        type: "GET",
        data: {memos: 'text'},
        dataType: "json",
        success: function (data) {
            for (var i = 0 ; i < data.length ; i++){
                console.log(data[i].text);
                $('ul').append('<li>'+ data[i].text + '</li>');
              }
        },
        error: function (data) {
            console.log("error");
        }
    });
    }
  });

#困っている事
ポーリングで取得してきた値が毎回htmlに挿入されてしまっているので、ポーリング時に前回のポーリングで取得した値と比較し、差分分だけhtmlに反映させたい。

Answer 1

$('ul').children('li').length でulの子要素としてliがいくつあるか分かるのでこれをfor文の初期値として使ってあげれば差分のみの更新とできるのではないでしょうか。

Comments

[mistn]

ただ全件取得を毎回やるのはパフォーマンス的にもよくないので、差分のみを返すという処理をサーバー側でやってあげたほうがいい気もします。

[nanase21]

なるほど。確かに差分分をサーバーから返してあげるのが良さそうですね。
ご教示いただきありがとうございました。