检测 setInterval 计时器是否在 javascript 中完成答案

【问题标题】：detect if setInterval timer is complete in javascript检测 setInterval 计时器是否在 javascript 中完成
【发布时间】：2012-07-24 01:06:05
【问题描述】：

我正在尝试使用 Javascipt 构建 HTML5 蛇游戏。我有一个主要问题需要解决，但经过数小时的思考仍无法解决。

这与 setInterval 和箭头键按下时的蛇运动有关。当快速按下箭头键时.. 几乎就像按多个键一样游戏结束（它意味着当蛇跑过自己时结束）

解决问题的工作模型：http://jsfiddle.net/MgsZp/29/

情况：蛇正在向下移动，当我快速按下左箭头然后向上箭头时，当左箭头的时间间隔立即清除时，蛇会越过自身（仅向上移动）。相反，它应该向左然后向上移动。

我试图将在这种情况下按下的箭头键存储在数组中，但无法处理。

例子：

var 箭头数组 = [] ; /* 存储按下的箭头键 */

// 按键时 setInterval(move_snake, timer) 方向存储在 arrowArray[0]

// arrowArray.shift() 移除蛇当前移动的方向，并在arrowArray[0]中为下一个方向让路

现在，当快速按下箭头键时，我如何等到蛇向一个方向移动后再向第二个方向移动。尝试在 setTimeout 中使用 setInterval 等待计时器结束，但没有成功。

帮忙？

【问题讨论】：

【解决方案1】：

这里有一个想法：与其用箭头键清除间隔并重新开始，不如让箭头键改变蛇在下一帧中前进的方向。这避免了我在改变蛇的方向时看到的一点延迟。箭头键应该只是设置下一个移动方向。然后当区间函数再次运行时，它会检查下一个方向是否有效。这解决了蛇试图朝相反方向移动的问题。

【讨论】：

你是对的。通过仅使用箭头键来改变方向并使用 setInterval 来绘制蛇，避免了方向改变时的延迟。但是，当您几乎像多键一样快速按键时，原始问题仍然存在。即，当蛇向下移动并且您几乎立即单击向左和向上键时。蛇向上向后移动而没有先向左移动。她的小提琴@ 987654321@

【解决方案2】：

试试这个：在您的按键处理程序中，执行arrowArray.push(newDirection); 并在每一帧中，关闭新方向或使用当前方向。这样，蛇每帧可以改变一次方向，如果蛇正在下降，那么用户在下一帧出现之前按右、上、右、下将导致正确的事情发生。

【讨论】：

我试过这个，推送新的键值并移动它们，但问题仍然存在。假设当立即按下左键和上键时，arrowArray 具有 {down} 。arrowArray = {up} 而不是 arrowArray = {left, up} 因为 setInterval 几乎立即清除 left。