Как мне зациклить что-то навсегда в JS?

Я пытаюсь зациклить этот блок кода. Как мне это сделать? Я пытаюсь изменить цвет навсегда.

<!DOCTYPE html>
<html lang = "en">
  <head>
    <title>Home</title>
    <meta charset = "UTF-8" />
    <meta name = "viewport" content = "width=device-width" />
    <link rel = "stylesheet" href = "styles.css" />
    <script  defer  src = "script.js"></script>
  </head>
  <body>
    <h1 onclick = "changecolor()">HackerXGames</h1>
  </body>
</html>

function changecolor(){
  setTimeout(() => {
    document.body.style.backgroundColor = "blue";
    setTimeout(() => {
      document.body.style.backgroundColor = "red";
      setTimeout(() => {
        document.body.style.backgroundColor = "lightblue";
        setTimeout(() => {
          document.body.style.backgroundColor = "#800000";
          setTimeout(() => {
            document.body.style.backgroundColor = "#ff0066";
            setTimeout(() => {
              document.body.style.backgroundColor = "#ff6699";
              setTimeout(() => {
                document.body.style.backgroundColor = "#9900cc";
                setTimeout(() => {
                  document.body.style.backgroundColor = "Lime";
                  setTimeout(() => {
                    document.body.style.backgroundColor = "#000099";
                    setTimeout(() => {
                      document.body.style.backgroundColor = "#ff9430";
                     },1500)
                   },1500)
                 },1500)
               },1500)
             },1500)
           },1500)
         },1500)
       },1500)
     },1500)

   },2500)
  }

Было бы гораздо разумнее поместить все цвета в массив и циклически перебирать их в цикле.

— 21.06.2024 00:13

@ColemanTO Это полностью заблокирует страницу.

— 21.06.2024 00:15

Используйте setInterval() для периодического запуска кода. Функция может увеличивать индекс массива.

— 21.06.2024 00:15

Просто добавьте еще один changecolor() вызов в последний (самый внутренний) setTimeout обратный вызов.

— 21.06.2024 01:04

javascript loops

21.06.2024 00:05

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Может быть, попробуйте что-то вроде этого.

// keep a list of all the colors you want to cycle through
const colors = [
    'blue',
    'red',
    'lightblue',
    '#800000',
    '#ff0066',
    '#ff6699',
    '#9900cc',
    'Lime',
    '#000099',
    '#ff9430',
];

// this function sets the color
const changeColor = (color) => {
    document.body.style.backgroundColor = color;
};

// keep track of the color you are on
let colorIndex = 0;

// this function waits for an amount of milliseconds
const sleep = async (millis) => {
    return new Promise((resolve) => {
        setTimeout(resolve, millis);
    });
};

// main function
(async () => {
    // loop forever
    while (true) {
        // sleep for 1500 ms
        await sleep(1500);
        // change the color
        changeColor(colors[colorIndex]);
        // update the color index
        colorIndex = (colorIndex + 1) % colors.length;
    }
})().catch(console.error);

Функцию не обязательно помечать как асинхронную, если она просто возвращает обещание.

— 21.06.2024 14:04

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

— 22.06.2024 18:31

21.06.2024 00:59

Ответ принят как подходящий

Используйте setInterval, если вы хотите, чтобы что-то повторялось бесконечно и с постоянной скоростью.

Функция возвращает идентификатор интервала, поэтому, если вы хотите остановить его позже, вы можете вызвать clearInterval с этим идентификатором.

const colors = [
    'blue',
    'red',
    'lightblue',
    '#800000',
    '#ff0066',
    '#ff6699',
    '#9900cc',
    'Lime',
    '#000099',
    '#ff9430',
];

let colorInterval;
let colorIndex = 0;

function startChangingBg() {
    changeBackground(); // This is optional; so you don't have to wait for first interval
    
    colorInterval = setInterval(changeBackground, 1500);
}

function stopChangingBg() {
    clearInterval(colorInterval);
}

function changeBackground() {
    document.body.style.backgroundColor = colors[colorIndex];
    colorIndex += 1;
    if (colorIndex >= colors.length) {
      colorIndex = 0;
    }
}

<!DOCTYPE html>
<html lang = "en">
  <head>
    <title>Home</title>
    <meta charset = "UTF-8" />
    <meta name = "viewport" content = "width=device-width" />
    <link rel = "stylesheet" href = "styles.css" />
    <script  defer  src = "script.js"></script>
  </head>
  <body>
    <h1>HackerXGames</h1>
    <button onclick = "startChangingBg()">Start changing background</button>
    <button onclick = "stopChangingBg()">Stop changing background</button>
  </body>
</html>

21.06.2024 01:41

Вы можете использовать функцию setInterval в сочетании с массивом цветов.

const colors = ["blue", "red", "lightblue", "#800000", "#ff0066", "#ff6699", "#9900cc", "Lime", "#000099", "#ff9430"];
let index = 0;
let intervalId;

function changecolor() {        
    if (intervalId) {
        clearInterval(intervalId); 
    }

    intervalId = setInterval(() => {
        document.body.style.backgroundColor = colors[index];
        index = (index + 1) % colors.length; // This will loop back to the first color after the last one
    }, 1500);
}

<h1 onclick = "changecolor()">HackerXGames</h1>

Этот код будет непрерывно перебирать цвета в массиве, меняя цвет фона каждые 1,5 секунды.

21.06.2024 08:05

Другие вопросы по теме

Как перебирать несколько коллекций одновременно?

Использование условных операторов в Dymola

Открытие файлов внешних данных в цикле do Fortran

Прекратить выполнение цикла при обнаружении первой пустой ячейки

Получение случайных символов после попытки замены символов в C++

Создание столбца вероятностей в r для кадра данных

Как добавить разные параметры слоя

Terraform – Как использовать один и тот же блок кода создания ресурсов для назначения нескольких ролей

Как перебирать несколько диапазонов/последовательностей/числ, указанных в var?

Zig для итератора диапазона цикла с пользовательским типом int

Как мне зациклить что-то навсегда в JS?

Ответы 3

Другие вопросы по теме

Похожие вопросы