Задержки Javascript

Question

Я делаю тестовую страницу с кнопками, которые выполняют разные скрипты. Я хочу изменить цвет фона каждую секунду в течение 5 секунд, всего 5 цветов. Я читал и смотрел видео на setInterval и setTimeout, и я просто не понимаю.

Что я хочу:

x 
wait 1sec 
y 
wait 1sec 
z 
wait 1 sec 
etc... 

Я хотел бы сделать это все в одной функции, но я отказался от что из-за, казалось бы необходимости ссылаться на функцию в setTimeout(function, 500)

Так что я создал новая функция для каждого изменения цвета, как вы можете видеть, а затем создала disco(), который мог бы вызвать каждое изменение фона.

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

Буду очень признателен за разъяснение, как это сделать. Благодаря!

function disco() { 
    setTimeout(aquaman, 500); 
    setTimeout(pinkman, 500); 
    setTimeout(blueman, 500); 
    setTimeout(redman, 500); 
    setTimeout(brownman, 500); 
} 

function aquaman() { 
    document.body.style.backgroundColor = "aqua"; 
} 

function brownman() { 
    document.body.style.backgroundColor = "brown"; 
} 

function redman() { 
    document.body.style.backgroundColor = "red"; 
} 

function pinkman() { 
    document.body.style.backgroundColor = "pink"; 
} 

function blueman() { 
    document.body.style.backgroundColor = "blue"; 
} 

Answer 1

ниже код изменит цвет фона к следующему в массиве, все, что вам нужно сделать, это установить интервал на нем время вы хотите, чтобы цвет изменить, падение комментария, если у вас есть сомнения относительно того, как это работает:

function changeColor(){ 
 
     var colors = ['aqua','brown','red','pink','blue'], 
 
      currColor = ((colors.indexOf(document.body.style.backgroundColor) + 1) % 5); 
 
     
 
     if(currColor === -1) currColor = 0; 
 

 
     document.body.style.backgroundColor = colors[ currColor ]; 
 
    } 
 

 
    setInterval(changeColor, 1000)

Answer 2

setTimeout() является асинхронный API. Вы используете его для вызова, чтобы браузер выполнял функцию, которую вы передали через n миллисекунд. Все ваши вызовы setTimeout() имеют тайм-аут, равный 500, что означает, что все эти функции будут выполняться примерно в одно и то же время.

Это:

function disco() 
{ 
setTimeout(aquaman, 500); 
setTimeout(pinkman, 1000); 
setTimeout(blueman, 1500); 
setTimeout(redman, 2000); 
setTimeout(brownman, 2500); 
} 

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

function aquaman() { 
    document.body.style.backgroundColor = "aqua"; 
} 

function brownman() { 
    document.body.style.backgroundColor = "brown"; 
} 

function redman() { 
    document.body.style.backgroundColor = "red"; 
} 

function pinkman() { 
    document.body.style.backgroundColor = "pink"; 
} 

function blueman() { 
    document.body.style.backgroundColor = "blue"; 
} 

function disco() { 
    var timeout = 500; 
    var funcs = [aquaman, brownman, redman, pinkman, blueman]; 
    funcs.forEach(function(func) { 
     setTimeout(func, timeout); 
     timeout += 500; 
    }); 
} 

Этого пример уменьшает некоторое дублирование, но не все , Мы все еще можем отбросить эти ненужные, повторяющиеся определения функций:

function disco() { 
    var timeout = 500; 
    var colors = ['aqua', 'brown', 'red', 'pink', 'blue']; 
    colors.forEach(function(color) { 
     setTimeout(function() { 
     document.body.style.backgroundColor = color; 
     }, timeout); 
     timeout += 500; 
    }); 
} 

Это идеальное решение для вашей проблемы.

Answer 3

var colors = ['red','pink','blue']; 
 
    var currentColor = 0; 
 
    function changeColor() { 
 
     setTimeout(function() { 
 
     if(currentColor === colors.length) { 
 
      currentColor = 0; 
 
     } 
 
     document.body.style.backgroundColor = colors[currentColor]; 
 
     changeColor(currentColor++); 
 
     }, 500); 
 
    } 
 
    changeColor();

recursivly выполнить changeColor в SetTimeout, потому что вы хотите, чтобы задержать выполнение каждого 500мс

Answer 4

var bg = { 
 
     colors: ['red','blue', 'green'], 
 
     next: 0, 
 
     getNextColor: function(){ 
 
      return this.colors[this.next++ % this.colors.length]; 
 
     } 
 
    }; 
 

 
    setInterval(function() { 
 
      document.body.style.backgroundColor = bg.getNextColor(); 
 
     }, 1000);

Answer 5

Очень Basic:

<script> 

(function disco() { 
    setTimeout(function aquaman() {document.body.style.backgroundColor = "aqua";}, 0); 
    setTimeout(function pinkman() {document.body.style.backgroundColor = "pink";}, 1000); 
    setTimeout(function blueman() {document.body.style.backgroundColor = "blue";}, 2000); 
    setTimeout(function redman() {document.body.style.backgroundColor = "red";}, 3000); 
    setTimeout(function brownman() { document.body.style.backgroundColor = "brown";}, 4000); 
})(); 
</script> 

Демонстрация: http://jsbin.com/qumagozosi/edit?html,js,output