3

我有一个在单击事件上运行的函数，该函数对我的一些动画（我正在玩游戏）使用 javascript 的 setIterval，所以问题是如果用户在动画仍在显示时单击（setInterval 仍在执行）setInterval堆积在事件堆栈中，或者这就是我发现的结果，因此要么破坏我的游戏，要么以两倍的速度运行（动画）。我的问题是有什么方法可以防止事件堆叠？我不希望 setInterval 叠加在前面的 setInterval 上，依此类推。我知道我可以像这样使用 clearInterval 函数：

  var timerInterval = setInterval(drawPlayerRunning, 50);
  clearInterval(timerInterval);

但它并没有真正像我想要的那样工作，因为如果用户在函数仍在执行时多次单击怎么办，clearInterval 只会摆脱事件堆栈的最后一个事件，而所有以前的事件仍然在“游戏”。知道如何防止此事件堆积，或者至少有效地删除它们吗？

4

2 回答 2

3

您可以创建一个监视间隔状态的标志：1）

var isIntervalInProgress = false;
setInterval(function()
{
  if ( isIntervalInProgress )
    return false;

  isIntervalInProgress = true;

  drawPlayerRunning();

  isIntervalInProgress = false;

}, 50);

或者只是一个超时，一旦完成就会自行运行：2）

var func = function()
{
  setTimeout(function()
  {
    drawPlayerRunning();
    func();
  }, 50)
}

随你喜欢

于 2012-11-12T18:47:08.843 回答
0

您想使用requestAnimationFrame。它在设计时考虑到了游戏，如果您的代码恰好太慢，它会相应地降低您的帧速率（例如从 60 fps 到 30 fps）。但它不会叠加事件。

编辑：对不起，我想我误解了你的问题。让我再试一次。

您应该只有一个draw每隔几毫秒调用一次的函数（使用 设置间隔requestAnimationFrame(draw)）。

单击不应添加新的间隔，而是创建一个floatingAnimation对象并将其添加到要渲染的对象列表中。draw每次浏览器调用时，该函数都会渲染所有动画对象draw。在传递给 的参数中draw，会有一个时间戳。使用此时间戳减去创建日期floatingAnimation来确定如何在角色上方绘制浮动物体。

于 2012-11-12T18:50:19.263 回答