Добавление задержки для функции во время рисования объектов

Question

Я поместил setInterval в код, но это, очевидно, задерживает все лазеры на 1 секунду.
Я хочу, чтобы он работал в следующей последовательности:
- при запуске Laser1 и Laser2 работают.
- 1 секунда, перерыв и запуск другого набора лазеров и т. Д.

Также, если бы кто-то мог научить меня, как перемещать все блоки кода на четыре пробела на форуме, это было бы удивительно, поскольку ни один из способов, которые я нашел в Google, не решил эту нелепую проблему.

Сочетание кодов:

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/
лазеры красные

Я думаю, что я должен работать с логическими значениями, но не могу установить его там.
Похожая тема была с активацией ключа, но я потерял связь с тем, кто предложил решение на основе логических значений (так как оно не работало хорошо), поэтому сначала я взял простейшую часть без привлечения ключей.

Любые советы приветствуются:)

Answer 1

Попробуйте изменить setInterval на setTimeout, так как он уже зацикливается - просто добавьте задержку.Также переместите вызов requestAnimationFrame вниз draw, а не вверх:

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