JS中TD背景色修改后check_game提前执行的解决方法咨询

这是因为浏览器的JS执行线程和渲染线程是互斥的——当前点击事件的回调属于同步任务，你修改style.backgroundColor后，浏览器并不会立刻更新UI，而是要等当前同步任务（包括紧接着调用的check_game）全部执行完毕，才会进入渲染阶段刷新页面。所以视觉上就会出现check_game先执行、背景色后变化的情况。

你可以通过把check_game的调用放到下一个事件循环或者浏览器重绘时机来解决，两种方法任选其一：

方法1：用setTimeout延迟执行 #

把check_game包裹在setTimeout里，哪怕延迟0毫秒，也会让浏览器先完成当前UI更新，再执行后续逻辑：

function blue_checked(id) {
  var table = document.getElementById("mytable").getElementsByTagName("td");
  selected_home_blue.push(id);
  table[id - 1].style.backgroundColor = "blue";
  // 放到下一个事件循环，让浏览器先渲染背景色
  setTimeout(() => {
    check_game(selected_home_blue, "blue");
  }, 0);
}

方法2：用requestAnimationFrame（更贴合UI场景） #

requestAnimationFrame会在浏览器下一次重绘前执行回调，能保证UI更新完成后再运行check_game：

function blue_checked(id) {
  var table = document.getElementById("mytable").getElementsByTagName("td");
  selected_home_blue.push(id);
  table[id - 1].style.backgroundColor = "blue";
  // 等待浏览器完成当前帧渲染后执行
  requestAnimationFrame(() => {
    check_game(selected_home_blue, "blue");
  });
}

另外提个小优化：你现在的td标签上同时写了onclick属性，又给table绑定了点击事件，属于重复监听，建议统一用table的事件委托（就是你现在写的addEventListener），去掉td上的onclick属性，避免逻辑混乱。

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