Нужна функция, меняющая задний фон div каждые 500 мс. Требуется устранение ошибки

Question

У меня что-то не так. Функция color() должна вызывать саму себя каждые 500 мс и менять задний фон тега div с классом .text

Код:

const text = document.querySelector('.text');

text.style.background = 'red';
text.style.width = '200px';
text.style.height = '200px';

function color () {
    const text = document.querySelector('.text');
    if (text.style.background == 'blue') {
        text.style.background = 'red';
    } else if (text.style.background == 'red') {
        text.style.background = 'green';
    } else {
        text.style.background = 'blue';
    }
    setInterval(() => {
        color();
    }, 500);
}

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="text"></div>
    <script src="script.js"></script>
</body>
</html>

Answer 1

В вашем текущем коде нужно вместо

setInterval

написать

setTimeout

Всё потому что setInterval вызывается бесконечно и будет бесконечно запускать функцию каждые 500 мс. При каждом новом вызове будет происходить запуск всё нового и нового счётчика setInterval, в итоге их будет огромное количество и будет происходить наслаиваение друг на друга всё большего количества бесконечных setInterval. А setTimeout отрабатывает только один раз. Таймаут вызывал функцию и "умер". В следующий вызов функции будет вызов нового таймаута, который отработает тоже один раз и тоже после срабатываения "умрёт"

Ну и не забыть самый первый вызов color() тоже надо

БЛОГ НА HUSL

Нужна функция, меняющая задний фон div каждые 500 мс. Требуется устранение ошибки

Ответы (1 шт):