在多个setTimeout实例中使用setTimeout

Question

我正在创建一个‘高级’的Tic脚趾游戏，每回合10秒后消失(即:每放置X或O在10秒后回复到一个空白方块)。这一切都很好，但是如果用户决定取消当前的游戏并启动一个新的游戏，问题就会出现。

如果用户启动了一个新游戏，并单击先前占用的一个方块，超时功能将根据之前游戏中的单击清除该方块--即，在不到10秒的时间内。

使用clearTimeout为最近的SetTimeout实例重置计时器，但如果用户重置游戏板时选择了多个方块，则没有帮助。而且，由于setTimeout应用于onclick函数中的每个X和O，所以我无法跟踪多个实例in。

任何想法都将不胜感激，代码如下。

编辑:你可以在这里看到游戏的直播版本：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;
}

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

Answer 2

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