AJAX経由で返された前回の値を見つける

Question

誰かのオンラインスクリプトを終了しようとしていますが、オートリフレッシュ機能を使って繰り返しているユーザー名でいくつかの問題が発生しています。以前の値が返されたことをjQueryに知らせる方法はありますか？見つかった場合は、重複するユーザー名を表示しないでください。

$(document).ready(function() { 
    $.ajax({ 
     type: "GET", 
     url: "/members/groups/get-one-group-members-online/" + location.pathname.split("/")[4], 
     dataType: "json", 
    }).done(function(msg) { 
     $.each(msg.display_name, function(i, item) { 
      $("#members-online").append(msg.display_name[i] + "<br>"); 
     }); 
    }).fail(function() { 
     $('#members-online').html("Error retrieving online group members"); 
    }); 
}); 

function reloadElement() { 
    $.ajax({ 
     type: "GET", 
     url: "/members/groups/get-one-group-members-online/" + location.pathname.split("/")[4], 
     dataType: "json", 
    }).done(function(msg) { 
     $.each(msg.display_name, function(i, item) { 
      // how to not show repeating values? 
      $("#members-online").append(msg.display_name[i] + "<br>"); 
     }); 
    }).fail(function() { 
     $('#members-online').html("Error retrieving online group members"); 
    }); 
} 

setInterval(function() { 
    reloadElement() 
}, 5000); 

と実際のhtml要素：任意の助けをいただければ幸いです

<p id="members-online"></p> 

は、ここに私のコードです。自分の質問が不明な場合は、さらに情報を追加してみることができます。

ありがとうございます！

Answer 1

両方の状況で全く同じロジックを実行しているとすれば、ロジックを単純化できます。呼び出しが行われたときに要素に追加するのではなく、最初にempty()を呼び出すか、またはhtml()と設定して要素全体を再構築します。

ロジックを関数に抽出すると、ロード時とN秒ごとにロジックを呼び出すことができます。これを試してください：

$(function() { 
    function buildOnlineMemberList() { 
    $.ajax({ 
     type: "GET", 
     url: "/members/groups/get-one-group-members-online/" + location.pathname.split("/")[4], 
     dataType: "json", 
    }).done(function(msg) { 
     var displayNames = msg.display_name.join('<br />'); 
     $("#members-online").html(displayNames); 
    }).fail(function() { 
     $('#members-online').html("Error retrieving online group members"); 
    }); 
    } 

    setInterval(function() { 
    buildOnlineMemberList(); // call on interval 
    }, 5000); 
    buildOnlineMemberList(); // call on load 
}); 

ただし、AJAXポーリングはアンチパターンとみなされます。新しいメンバがオンラインになるか、オフラインになったときに、接続されたクライアントを更新するWebSocketを使用するほうがずっと良いでしょう。それらの名前は必要に応じて追加または削除できます。