将 clearTimeout 与 setTimeout 的多个实例一起使用答案

【问题标题】：Using clearTimeout with multiple instances of setTimeout将 clearTimeout 与 setTimeout 的多个实例一起使用
【发布时间】：2014-01-13 01:57:48
【问题描述】：

我正在创建一个“高级”井字游戏，其中每个回合在 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;
}

【问题讨论】：

标签： javascript settimeout cleartimeout

【解决方案1】：

保留未决超时列表。每次超时都会在触发时将自己从列表中删除。重置时，遍历列表并在每个列表上清除超时。

类似这样的：

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];
  }
}

【讨论】：

你错过了pending[t]=true那里
不幸的是，我在“for (var t in pending) if pending.hasOwnProperty(t) {' 行收到错误“Uncaught SyntaxError: Unexpected identifier”。 'if pending.hasOwnProperty(t)' 的原因是什么？
糟糕，您需要更多括号（已修复）。在此处阅读 hasOwnProperty：stackoverflow.com/questions/684672/…
知道了，谢谢亚当。如果没有 if 语句，它实际上似乎工作正常——你能告诉我为什么有必要为 't' 测试 'pending' 吗？在什么情况下 if 语句会返回 false（我想只有在没有单击单元格的情况下）？
Kyle——即使它在没有检查的情况下工作，总是包含它是一个好习惯。否则，如果任何其他代码修改了 Object.constructor.prototype，您的代码将开始出现异常。（您可以在 Google 上搜索有关此主题的更多详细信息。）

【解决方案2】：

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

【讨论】：