使用clearTimeout处理多个setTimeout实例

Question

我正在创建一个“高级”井字游戏，每次落子后10秒后会消失（即每次放置X或O后，都会在10秒后变回空白方格）。这一切都很好，但是如果用户决定取消当前游戏并开始新游戏，则会出现问题。

如果用户启动新游戏并单击以前占用的方格，则超时函数将根据先前游戏的点击清除该方格--即在不到10秒的时间内。

使用clearTimeout重置最近一次SetTimeout的计时器，但如果在用户重置游戏板时选择了多个方格，则无济于事。由于setTimeout应用于onclick函数中的每个X和O，因此我没有办法跟踪多个实例ID。

非常感谢任何想法，以下是代码。

编辑：您可以在此处查看游戏的实时版本（WIP）：http://kylechadha.com/projects/tic-tac-toe/ 全局变量：

var elements = document.getElementsByClassName('cell');
var rows = document.getElementsByClassName('row');
var alternate = 0;
var counter = 0;
var timerX; // Handles setTimeout instances for 'X'
var timerO; // Handles setTimeout instances for 'O'

设置 X 和 O 的函数：

  var play = function() {
  for (i = 0; i < elements.length; i++) {
    elements[i].onclick = function () {
      if (this.className[0] == "c" && win == false) {
        if (alternate % 2 == 0) {
          this.className = "xmove";
          alternate++;
          counter++;
          var paramPass = this;
          timerX = setTimeout(function() {disappear(paramPass);}, 10000) // Handles ID of most recent instance of setTimeout for 'X'
        } else {
          this.className = "omove";
          alternate++;
          counter++;
          var paramPass = this;
          timerO = setTimeout(function() {disappear(paramPass);}, 10000) // Handles ID of most recent instance of setTimeout for 'O'
        }
      }
      position(this);
      analysis();
    }
  }
}

当用户点击“新游戏”时重置功能：

var reset = function() {
  header[0].innerHTML = "Tic Tac Toe";
  for (i = 0; i < rows.length; i++) {
    for (j = 1; j < 6; j += 2) {
      rows[i].childNodes[j].className = "cell animated bounceIn";
    }
  }
  clearTimeout(timerX); // Clears Timeout for most recent instance (last 'X' clicked) before the game was reset
  clearTimeout(timerO); // Clears Timeout for most recent instance (last 'O' clicked) before the game was reset
  board = [["","",""],["","",""],["","",""]];
  counter = 0;
  alternate = 0;
  win = false;
}

- Kyle Chadha

Answer 1

保持一个未完成超时的列表。每个超时触发后都会从列表中删除自己。重置时，遍历列表并在每个上执行clearTimeout。

类似这样：

var pending = {};
function mySetTimeout(callback, delay) {
  var t;
  t = setTimeout(function() {delete pending[t];callback()}, delay)
  pending[t]=1;
}
function clearAllTimeouts() {
  for (var t in pending) if (pending.hasOwnProperty(t)) {
    clearTimeout(t);
    delete pending[t];
  }
}

- Adam Bliss

---

你漏掉了一个 pending[t]=true。 - user123444555621

很不幸，我在'for (var t in pending) if pending.hasOwnProperty(t) {'这一行遇到了一个"Uncaught SyntaxError: Unexpected identifier"的错误。为什么要使用'if pending.hasOwnProperty(t)'？ - Kyle Chadha

糟糕，你需要更多的括号（已修复）。在这里阅读hasOwnProperty的相关信息：https://dev59.com/AHRB5IYBdhLWcg3wN1EQ - Adam Bliss

明白了，谢谢Adam。实际上，在没有if语句的情况下，它似乎可以正常工作--您能告诉我为什么需要测试'pending'是否为't'吗？在什么情况下，if语句会返回false（只有当没有单元格被点击时，我想）？ - Kyle Chadha

Kyle，即使没有这个检查也能正常工作，但始终包含它是一个好习惯。否则，如果任何其他代码修改了Object.constructor.prototype，你的代码将开始出现问题。（你可以在谷歌上搜索更多关于此主题的详细信息。） - Adam Bliss

Answer 2

最简单的解决方案是创建一个计时器 ID 数组，然后每当您想要清除它们时，使用 for 循环迭代数组，并在每个计时器上使用 clearTimeout。您可以使用 Array.push 将 ID 添加到计时器数组中。

- K. S.