Question

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

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

但它并不像我想要的那样真正起作用，因为如果用户在函数仍在执行时多次点击，clearInterval将只删除事件堆栈的最后一个事件，而所有先前的事件仍然存在游戏”。知道如何防止这个事件叠加，或者至少有效地删除它们吗？

Answer 1

您可以创建一个监视间隔状态的标志： 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)
}

无论你喜欢什么

Answer 2

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

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

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

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

防止javascript setInterval函数堆积起来

2 个答案: