javascript - 在 jQuery 或普通 Javascript 中的操作之间暂停

Question

我正在开发一款游戏，我希望它能够执行某些操作，并且每件事之间有 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 秒的答案。

Answer 1

这里是一个如何将 Action 放入队列并以 2 秒的间隔依次执行的示例。此外，下次您激活某个操作时，它将被发布到同一队列，并且直到所有先前的操作完成后才会启动。

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