SetInterval и SetTimeout итеративный массив - PullRequest
Новая
       17

SetInterval и SetTimeout итеративный массив

0 голосов
/ 24 июня 2018

Я хочу сделать простой итеративный массив с for.Но не могу заставить этот сценарий работать ... Если кто-то может дать указания для самостоятельного изучения, я ценю любую идею! 

    var colors = ['green', 'red', 'blue', 'grey', 'orange'];
    function chColor(){
    setInterval(
	 function(colors){
  	  for(var i = 0; i <= colors.lenght; i++){
			document.body.style.backgroundColor = Colors[i];
		}},3000)}
    (function(){setTimeout(function(){chColor()},3000);})();

Ответы [ 2 ]

0 голосов
/ 24 июня 2018

Вы можете взять индекс для цветов и приращения после каждого интервала и скорректировать с помощью оператора остатка и длины массива.

Ваши вопросы:

  • Интервал с функцией с аргументом, этот параметр никогда не передается, поэтому он равен undefined.

  • for цикл в интервале, который повторяется прямо и заканчивается в конце использованным

  • массив Colors, который не существует. Javascript - это регистрозависимый язык.

  • Из-за цикла for конечный цвет, если брать правильный массив, всегда одинаков.

  • Неясное использование setTimeout, которое откладывает вызов chColor на 3 секунды. Первое изменение цвета пыльника через 3 секунды ... 

function chColor(colors, i) {
    setInterval(
        function() {
            document.body.style.backgroundColor = colors[i];
            i++;
            i %= colors.length;
        },
        3000
    );
}

var colors = ['green', 'red', 'blue', 'grey', 'orange'];
chColor(colors, 0); // take colors as array and start with index zero
0 голосов
/ 24 июня 2018

Требуется много исправлений.Найдите встроенные комментарии ниже: 

var colors = ['green', 'red', 'blue', 'grey', 'orange'];
function chColor(){
  setInterval(
    function(){ // do not pass colors in the method here, global colors should be used. 
      for(var i = 0; i < colors.length; i++){ // i should be < colors.length, it's 0 indexed.
        console.log(colors[i])// should be colors[i] not Colors[i]
      }},1000)}
(function(){setTimeout(chColor,1000);})(); // don't really need to make a blank function and call chColor, passing the function name will do. it's a callback
Попробуйте запустить фрагмент.

PS: в этом примере время сократилось до 1 с.

Редактировать : Если вы хотитеизменить цвет каждые n секунд: 

var colors = ['green', 'red', 'blue', 'grey', 'orange'];
function chColor(){
  var i = 0; 
  setInterval(function(){
    document.body.style.backgroundColor = colors[i];
    i = (i+1) % colors.length; // increment i and cycle through loop
  },1000)
}

(function(){setTimeout(chColor,1000);})();
...