如何在setInterval执行前清除Tablebody？前端代码求助

我是前端初学者。我希望在3秒的setInterval调用前清除表格主体（通过Tbody[0].textContent = '';），以便追加后续的TD元素，但目前该清除操作的执行时机远早于setInterval调用，请问有没有办法让清除操作刚好在setInterval执行前触发？感谢各位的帮助。

let datas = [
  ["14:01", "FRANKFRUIT", "FR402", "B02", "ONTIME"],
  ["15:22", "TOKYO", "TK211", "A32", "DELAYED"],
  ["15:35", "TOKYO", "GA90", "F89", "CANCELLED"],
  ["16:00", "OMAN", "NA15", "H64", "ONTIME"],
  ["17:35", "OMAN", "ZZ30", "N90", "ONTIME"],
];

//td and div generator

function wait(){

function rows(n,b) {
  for (i of datas[n]) {
    let td = document.createElement("td");
    let charr = i.split("");
    charr.forEach((e, i) => {
      setTimeout(() => {
        newDiv = document.createElement("div");
        newDiv.setAttribute("class", "newDiv");
        let divs = document.querySelectorAll('.newDiv');
        newDiv.innerHTML = e;
        //newDiv.classList.add("flip");
        td.appendChild(newDiv);
      }, 100*i);
     });
      Trow[b].appendChild(td);
    };
  };
  Tbody[0].textcontent = '';

random();

//randomising logic
function random(){
  for(let i = arr.length-1; i>0; i--){
    let randomval = Math.floor(Math.random()*(i+1));
    let temp = arr[i];
    arr[i] = arr[randomval];
    arr[randomval] = temp;
  }
}

let Rows = [rows(arr[0],0), rows(arr[1],1), rows(arr[2],2), rows(arr[3],3), rows(arr[4],4)];

}
setInterval(function(){wait()},3000);

核心问题分析 #

1. 代码里的textcontent是拼写错误，正确DOM属性为**textContent**（大小写敏感）。
2. 清除操作位置错误，且未处理旧动画的定时器残留——之前的字符动画setTimeout仍会执行，导致清除后旧内容继续添加。
3. 未定义arr变量，需补充初始值。

修改后的代码 #

let datas = [
  ["14:01", "FRANKFRUIT", "FR402", "B02", "ONTIME"],
  ["15:22", "TOKYO", "TK211", "A32", "DELAYED"],
  ["15:35", "TOKYO", "GA90", "F89", "CANCELLED"],
  ["16:00", "OMAN", "NA15", "H64", "ONTIME"],
  ["17:35", "OMAN", "ZZ30", "N90", "ONTIME"],
];
// 补充arr初始定义，用于随机排序5行数据
let arr = [0, 1, 2, 3, 4];
// 存储字符动画定时器ID，用于清除残留任务
let animationTimers = [];

function wait(){
  // 1. 清除表格内容：放在函数最开头，确保setInterval触发时第一时间执行
  Tbody[0].textContent = '';
  // 2. 清除所有未执行的旧动画定时器，避免干扰新内容
  animationTimers.forEach(timer => clearTimeout(timer));
  animationTimers = [];

  function rows(n,b) {
    for (let i of datas[n]) {
      let td = document.createElement("td");
      let charr = i.split("");
      charr.forEach((e, idx) => {
        // 保存定时器ID到数组
        const timer = setTimeout(() => {
          const newDiv = document.createElement("div");
          newDiv.className = "newDiv";
          newDiv.innerHTML = e;
          td.appendChild(newDiv);
        }, 100 * idx);
        animationTimers.push(timer);
      });
      Trow[b].appendChild(td);
    };
  };

  random();
  // 生成新行数据
  rows(arr[0],0);
  rows(arr[1],1);
  rows(arr[2],2);
  rows(arr[3],3);
  rows(arr[4],4);
}

// 随机排序逻辑
function random(){
  for(let i = arr.length-1; i>0; i--){
    let randomval = Math.floor(Math.random()*(i+1));
    let temp = arr[i];
    arr[i] = arr[randomval];
    arr[randomval] = temp;
  }
}

setInterval(wait, 3000);

关键修改点 #

• 将清除表格的代码移到wait()函数最开头，保证每次setInterval触发时，先清空表格再生成新内容。
• 添加animationTimers数组管理字符动画的定时器，每次执行wait()时清除旧定时器，避免残留动画干扰新内容。
• 修正textContent拼写错误，补充arr变量的初始定义。
• 简化冗余的Rows数组，直接调用rows函数生成内容。

内容的提问来源于stack exchange，提问作者Rahan Ajai