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

下面是如何将操作放入队列并以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

Answer 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设置为var，如果需要，您可以clearTimeout(var)。还有很多其他事情也应该考虑，但超出了这个问题的范围。