时间戳

首页 > 解决方案 > 如何删除 html 表中的重复条目

javascript - 如何删除 html 表中的重复条目

问题描述

我正在将 socket.io 用于聊天和统计网络应用程序。我在弄清楚如何删除我的 html 表中的重复条目时遇到问题。重复条目的发生只是因为每次有人发送消息时我都会获取 api，所以每次我获取 api 时，统计信息都会出现在表中，并且表会获取太多数据。

var socket = io("ws://localhost:3000/");

document.getElementById("message").addEventListener("keydown", (e) => {
  if (e.keyCode == 13) {
    e.preventDefault();
    setTimeout(() => {
      document.getElementById("sendbtn").click();
    }, 500);
  }
});

window.onbeforeunload = function () {
  return "Data will be lost if you leave the page, are you sure?";
};

document.getElementById("message").addEventListener("keydown", (e) => {
  if (e.keyCode == 13) {
    e.preventDefault();
    document.getElementById("userbtn").click();
  }
});

var send = () => {
  if (
    document.getElementById("username").value.length == 17 &&
    username.length > 1
  ) {
    socket.emit("message", document.getElementById("message").value);
    document.getElementById("message").value = " ";
    return false;
  } else {
    alert("Please enter and submit your steam ID");
  }
};

var setusername = () => {
  socket.emit("username", document.getElementById("username").value);
};

var stats = [];

socket.on("user", async (user) => {
  username = user;
  console.log(user);
});

socket.on("stats", (data) => {
  var table = document.getElementById("users-table");
  var row = table.insertRow(1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var kd = data.kd;
  cell1.innerHTML = username;
  cell2.innerHTML = kd.toFixed(2);
  cell3.innerHTML = data.time.toFixed() + " h";
});

var username = "";
var message = " ";

socket.on("message", (msg) => {
  message = msg;
  document.getElementById("messages").innerHTML +=
    "<span class=username-bx>" +
    username +
    "</span>" +
    ":" +
    " " +
    msg +
    "<br>";
});

window.setInterval(function () {
  var messagebox = document.getElementById("messages");
  messagebox.scrollTop = messagebox.scrollHeight;
}, 50);

有关更多信息，您可以在评论中问我。

标签： javascript

解决方案

全局变量 user 由套接字设置的事实有点奇怪（我本来希望用户成为响应的一部分）。

无论如何，如果您只想添加新消息和统计信息，我建议您为这些 (user + msg 和 user + data.kd) 计算一个 id？或者任何可以帮助您确定消息是新消息还是重复消息的) 然后维护这些列表/集合。如果 id 尚不存在，则仅在新的 msg/stats 上将它们添加到您的 Dom 中。

推荐阅读