Как заставить работать интервал setInterval()?

Question

[dropdatabasic]

Есть довольно примитивный код который должен рисовать квадрат 30х30 в рандомном месте холста
a и b = заранее заданная рандомная ширина и высота.
Но он отрабатывает так: через секунду появляется квадрат 30х30 и все. Через 5 сек отрабатывает таймаут с алертом.
Как заставить появляться новому квадрату каждую секунду до истечения 5 сек?

function getRect() {
ctx.fillRect(a, b, 30, 30);
}
var timer;
timer = setInterval(() => getRect(), 1000);
setTimeout(() => {
clearInterval(timer);
alert('stop');
}, 5000);

Answer 1

[Ярослав Сиваков]

Подозреваю, что квадрат у вас рисуется 5 раз, но в одном и том же месте, т.к. a и b у вас не меняются. И переименуйте getRect() в drawRect()!

Comments

[dropdatabasic]

А почему он по-вашему не генерирует рандомное число?

[Ярослав Сиваков]

dropdatabasic, генерирует, думаю. Но он генерирует 1 раз, а нужно 5. a и b должны присваиваться рандомному значению внутри getRect().

[toxa82]

Наверное, потому, что в коде вы не просите перегенерить a и b новыми рэндомными числами перед отрисовкой квадрата, он и рисует 5 квадратов на одном и том же месте.

Answer 2

[irishmann]

Я так понял что за 5 сек, должно появиться 5 квадратов, 1 в одну секунду. Интервал у нас 1 секунда, заменяем итерации, если итерация больше или равно 5, останавливаем интервал.

var iteration = 1;
var timer = setInterval(function (){
    /* 
        рисуем квадрат
    */
    
    iteration++;
    if (iteration >= 5) clearInterval(timer);
}, 1000);