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可以更好地在新成员联机或脱机时更新连接的客户端。然后可以根据需要添加或删除它们的名称。

查找通过AJAX

1 个答案: