Javascript globalTick（）JS中每个精灵的延迟勾号（）

对此，必须有一个非常简单的解决方案，因为我尝试过处理setInterval（），但似乎无法得到我想要的结果

我有一个globalTick（）

我没有给你们变量声明

我想要的是将每个新箭头推入数组的时间延迟一个在另一个对象中存在的设定时间，在本例中为3秒。在一个每秒被requestAnimationFrame调用60次左右的globalTick（）中，是否可能减慢速度？理想情况下，在纯JS中，除非JQuery是唯一的方法

---

非常感谢，希望这足够清楚

这里有一个使用setTimeout队列的解决方案

部分应用的

spawnArrow

函数被推送到队列中<代码>生成队列.shift（）从队列中删除第一个函数并调用它

let notes=[“A”、“B”、“C”、“D”、“E”]；
设spriteList=[]；
让队列=[]；
设延迟时间=500；
函数globalTick（）{
spriteList.forEach（sprite=>sprite.tick（））；
requestAnimationFrame（globalTick）；
}
globalTick（）；
$（“按钮”）。单击（按钮单击）；
函数onButtonClick（）{
让kickOffQueue=spawnkue.length
push（（）=>spawnArrow（注意））
);
if（kickOffQueue）{
//您可以在这里设置第一次执行的延迟时间
消费队列（500）；
}
}
函数队列（nextDelayTime）{
如果（spawnQueue.length>0）{
设置超时（（）=>{
sprownqueue.shift（）；
消耗队列（延迟时间）；
}，下一个延迟时间）；
}
}
功能箭头（注）{
var dirCode=Math.floor（（Math.random（）*8））；
spriteList.push（新箭头（dirCode，note））；
}
类箭头{
构造函数（dirCode，注释）{
this.dirCode=dirCode；
这个.x=0；
this.domEl=$（`${note}${dirCode}'）。appendTo（'body'）；
}
勾选（）{
这个.x+=1；
这个是.domEl.css({
marginLeft：这个
});
}
}

产卵箭头

看这里，我解释了如何用承诺创造瀑布

function globalTick(){
    ctx.clearRect(0,0,800,800)

    if(target){
        target.tick();
    }

    // Move arrows
    for(var i = 0; i < spriteList.length; i++){
        spriteList[i].tick()
    }


    window.requestAnimationFrame(globalTick);
}

document.onkeyup = function(e){
    // Change gamestate
    if(e.which == 13){
        $("#state"+gameState).hide()
        gameState ++

        if(gameState == 6){
            // Affect game variables
            player = new Player(0);
            target = new Target(targetX, targetY)

            for(var i = 0; i < player.calculateNotes(); i++){
                timerID = setInterval(spawnArrows(), 3000)
            }
            clearInterval(timerID)
    }

    // ...

spawnArrows = function(){
    // Rabdomize arrows (15 for now)
    var dirCode = Math.floor((Math.random() * 8));
    spriteList.push(new Arrow(dirCode))
    //soundsSequence.push(soundsList[dirCode])
}

    class Arrow{
        constructor(dirCode){
            this.dirCode = dirCode;
            this.speedX = 1
            this.speedY = 1

             switch(this.dirCode){
                // ...
            }

    tick(){
            ctx.fillStyle = "black"
            ctx.fillRect(this.x, this.y, spriteSize, spriteSize)

            switch(this.dirCode){
                case 0:
                    this.x += this.speedX
                    break
                case 1:
                    this.x += this.speedX
                    this.y -= this.speedY
                    break
                // ...