В чем заключается ошибка этой логики рекурсии?

Question

[KralisV]

Столкнулся с неочевидной проблемой логики. Консоль на предмет ошибок упорно молчит, нейросеть ничего внятного по этому вопросу ответить не смогла, а я в упор не вижу причин ошибки.

function disco(delay) {
    setTimeout(function tick() {
        document.body.style.backgroundColor = "red";

        setTimeout(() => {
            document.body.style.backgroundColor = "green";
            tick();
        }, delay);
    }, delay);
}

disco(1000);

Код - простое баловство во время изучения работы таймеров, но мне бы очень хотелось понять причины подобного поведения.

По задумке функция tick() должна зацикливаться из-за вызова вложенной безымянной функции в setTimeout, при этом менять цвет фона. Но на практике вложенный таймер даже не срабатывает, цвет фона остается красным, хотя если закомментировать вызов tick() , то таймер срабатывает, вызывая безымянную функцию, меняющую цвет фона на зеленый. Естественно уже без рекурсии.

Очень хотелось бы понять пробелы в своей логике, буду благодарен если кто-то обьяснит причины такого контринтуитивного для меня поведения

Comments

[Илья]

А зачем для смены фона нужна рекурсия? Хватит бесконечного цикла

[Виктор Майоров]

function disco(delay) {
    setTimeout(function tick() {
        document.body.style.backgroundColor = "red";

        setTimeout(() => {
            document.body.style.backgroundColor = "green";
--            tick();
++          disco(delay)
        }, delay);
    }, delay);
}

[Илья]

Даже не так, хватит setInterval

[VoidVolker]

KralisV И на каком этапе отладки данного кода у вас возникли сложности? Не умеете пользоваться отладчиком? Не знаете хотя бы методы вывода текста в консоль? Или вы даже не утруждали себя данными действиями и предлагаете сделать их за вас?

[KralisV]

VoidVolker,

Консоль на предмет ошибок упорно молчит

Проблема в самой логике отложенных вызовов - я банально не понимаю в чем заключается причина, а понять хотелось бы

[VoidVolker]

KralisV, вот для этого и существует отладчик и вывод отладочной информации. Если бы в это сделали - сразу бы увидели в чём именно проблема вашего кода. Учитесь самостоятельно использовать отладку кода. Это очень нужные и полезный навык.

Answer 1

[timau32]

Ну у тебя почти все правильно разве, что можно сделать его короче.

function disco(delay, isRed) {
    setTimeout(function tick() {
        document.body.style.backgroundColor = isRed ? 'red' : 'green';
        disco(delay, !isRed)
    }, delay);
}

disco(1000);

и в принципе потом можно по такой же логике просто подрубить setInterval вместо бесконечных генераций Таймаутов.

Answer 2

[WbICHA]

Ты не ту функцию вызываешь. У тебя мгновенно вешается красный после зелёного, естественно ты не увидишь разницы.

document.body.style.backgroundColor = "red";
document.body.style.backgroundColor = "green";
// delay
document.body.style.backgroundColor = "red";
document.body.style.backgroundColor = "green";
// delay
...

Тебе disco вызывать надо.

Comments

[szQocks]

ему наверное так непонятно будет, дополню

коллбэк просто вызывает 2жды стилизацию стиля у боди, сначала грин потом ред, и так как js не на столько тупой, то он не отрисовывает сначала грин а потом ред, а оставляет только ред

ведь отрисовка аттрибута происходит после выполнения кода