0

我正在开发一款游戏，我希望它在每件事之间有 2 秒的停顿来做某些事情。

因为它不是 jQuery 包装的选择，所以我不能使用 delay()。下面代码的问题是 RedFlash() 函数在暂停之前发生。也许我需要一个大函数来运行数组中的函数，每个函数之间有 2 秒的暂停。

// Attack Phase
function attackPhase() {
  animateMessage("You slash with your weapon!", "red");
  window.setTimeout(function() {
     animateMessage("You dealt 15 damage!", "red");
  }, 2000);
  window.setTimeout(function() {
     $('.card_hp').redFlash();
  }, 2000);    
}

在摘要中，它是这样的：

// action
// pause 2 seconds
// action
// pause 2 seconds
// action
// pause 2 seconds
// and so on

我找到了几个关于如何暂停一次的答案，但没有找到如何暂停几次并让每个动作等待整个 2 秒的答案。

4

2 回答 2

2

您的问题是因为您本质上是setTimeout()同时启动这两个功能。

// Attack Phase
  function attackPhase() {
    animateMessage("You slash with your weapon!", "red");
    window.setTimeout(function() {
          animateMessage("You dealt 15 damage!", "red");
          window.setTimeout(function() {
                $('.card_hp').redFlash();
           }, 2000);
    } , 2000);
 }

注意：这不是写得很好的代码。您应该将 setTimeouts 设置为 a var，以便clearTimeout(var)在需要时使用。还有很多其他的事情也应该考虑，但超出了这个问题的范围。

于 2013-03-12T20:36:12.343 回答
2

这是一个如何将动作放入队列中并以 2s 的间隔依次执行的示例。此外，下次您激活一个操作时，它将被发布到同一个队列中，并且在所有先前的操作完成之前不会开始。

var queue = [],
    timer,
    processQueue,
    animateMessage,
    attackPhase;

processQueue = function processQueue(force) {
  if(!timer || force) {
    timer = setTimeout(function() {
      if(queue.length > 0) {
        queue.splice(0,1)[0]();
        processQueue(true);
      } else {
        timer = null;
      }
    }, 2000);
  }
};

animateMessage = function animateMessage(msg, color) {
  console.log(msg);
};

attackPhase = function attackPhase() {
  queue.push(function(){
    animateMessage("You slash with your weapon!", "red");
  });
  queue.push(function() {
    animateMessage("You dealt 15 damage!", "red");
  });
  processQueue();
};

attackPhase();
attackPhase();

这是一个工作示例http://jsbin.com/akagin/4/edit

于 2013-03-12T21:53:18.010 回答