查找通過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輪詢被認爲是反模式。當新成員聯機或脫機時，使用WebSockets可以更好地連接客戶端。他們的名字可以根據需要添加或刪除。