时间戳

首页 > 解决方案 > 在绘制对象期间添加延迟功能

javascript - 在绘制对象期间添加延迟功能

问题描述

我将 setInterval 放入代码中，但这显然将所有激光延迟了 1 秒。
我希望它按以下顺序工作：
- 在开始时，laser1 和laser2 被发射。
- 1 秒休息并发射另一组激光等。

此外，如果有人可以教我如何在论坛上将所有代码块移动四个空格，那将是惊人的，因为我在谷歌找到的方法都没有解决这个荒谬的问题。

代码快捷方式：

let laser1;
let lasers1 = [];
let laser2;
let lasers2 = [];

function createLaser() {
    laser1 = new Laser(bossOne.x, bossOne.y + bossOne.sizeY, 10, 50, 5);
    lasers1.push(laser1);
    laser2 = new Laser(bossOne.x + bossOne.sizeX - 10, bossOne.y + 
    bossOne.sizeY, 10, 50, 5);
    lasers2.push(laser2);
}


function draw() {
requestAnimationFrame(draw);

setInterval(createLaser, 1000);

for (i = 0; i < lasers1.length; i++) {
    lasers1[i].show();
    lasers1[i].move();
}
for (i = 0; i < lasers2.length; i++) {
    lasers2[i].show();
    lasers2[i].move();
}

}

requestAnimationFrame(draw);

如果需要完整代码的远程主机： https
://stacho163.000webhostapp.com/ 激光是红色的

我认为我应该使用布尔值，但无法将其设置在那里。
有一个与密钥激活类似的主题，但是我与基于布尔值提出解决方案的人失去了联系（因为它效果不佳），所以我首先选择了最简单的部分，而不涉及密钥。

任何提示表示赞赏:)

标签： javascripthtmlloops

解决方案

尝试更改setInterval为setTimeout，因为它已经在递归循环 - 只需为其添加延迟即可。还将呼叫移动requestAnimationFrame到底部draw，而不是顶部：

function draw()
    setTimeout(createLasers, 1000);
    //Loops
    requestAnimationFrame(draw);
}

推荐阅读