Estoy tratando de terminar un guión de quién está en línea, pero tengo algunos problemas con la repetición de nombres de usuario con mi función de actualización automática. ¿Hay alguna forma en jQuery de encontrar valores anteriores devueltos y, si los encuentra, omita mostrar nombres de usuario duplicados?
Aquí está mi código:
$(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);y el elemento html real:
<p id="members-online"></p>Cualquier ayuda sería apreciada. Puedo intentar agregar más información si mi pregunta no está clara.
¡Gracias!
Dado que está realizando exactamente la misma lógica en ambas situaciones, la lógica se puede simplificar. En lugar de agregar al elemento cuando se realiza la llamada, simplemente reconstruya todo el elemento llamando primero a empty() o configurando su html() .
Si luego extrae la lógica a una función, puede llamarla tanto en carga como cada N segundos. Prueba esto:
$(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 });Sin embargo, debe tener en cuenta que el sondeo AJAX se considera un antipatrón. Sería mucho mejor usar WebSockets que actualizan los clientes conectados cuando un nuevo miembro se conecta o se desconecta. Su nombre se puede agregar o eliminar según sea necesario.