Блог

Главная - Вопросы по программированию - jQuery: бесконечный цикл по массиву … each()?

jQuery: бесконечный цикл по массиву … each()?

#jquery

#jquery

Вопрос:

Здесь скрипка:http://jsfiddle.net/F6nJu /

У меня есть цветное поле:

 <div id="colorblock"></div>
#colorblock { background:#3ff; width: 100%; height: 300px; }

У меня есть массив цветов, созданный в javascript:

 var arr = [ "#f00", "#ff0", "#f0f", "#f66"];

Я перебираю эти цвета с помощью функции jQuery each() :

 $.each(arr, function(key, value) {
  $('#colorblock').delay('1200').animate({backgroundColor:value}, 600);
});

Когда массив повторяется до конца, как я могу начать итерацию массива заново (чтобы анимация продолжалась вечно)?

Комментарии:

1. Зачем выполнять итерации, когда можно просто использовать индексы массива? i=0; arr[i % arr.length]

Ответ №1:

 var arr = ["#f00", "#ff0", "#f0f", "#f66"];

// run through the array forever
(function recurse(counter) {
    // get the colour
    var color = arr[counter];
    // animate it
    $('#colorblock').delay('1200').animate({
        backgroundColor: color
    }, 600);
    // delete the value to save memory
    delete arr[counter];
    // add the value at the end of the array
    arr.push(color);
    // run it again for the next number
    setTimeout(function() {
        recurse(counter   1);
    }, 200);
// start it for the first number.
})(0);

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

Live Example

Для тех, кому интересно, как выглядит массив:

 ["#foo", "#ff0", "#f0f", "#f66"] (counter = 0)
[undefined, "#ff0", "#f0f", "#f66", "#foo"] (counter = 1)
[undefined, undefined, "#f0f", "#f66", "#foo", "#ff0"] (counter = 2)
[undefined, undefined, undefined, "#f66", "#foo", "#ff0", "#f0f"] (counter = 3)
[undefined, undefined, undefined, undefined, "#foo", "#ff0", "#f0f", "#f66"] (counter = 4)
etc.

Комментарии:

1. я полагаю, вы используете мою set_color функцию?

2. пожалуйста… (мы здесь, чтобы научиться этому … 😉 Последняя строка вашего кода: })(0); я играл с числами: 0, 1, 2, 3. Произошли интересные вещи. Что это такое на самом деле?

3. @roXon добавил больше деталей / комментариев.

4. @Raynos… Вы так добры! Вы только что заработали 10! (Я просто не могу найти кнопку 😉 ну … 1

5. Идеальное решение… но как его переключить? Я пытаюсь использовать jQuery .toggle() с помощью stop() в recurse ()…

Ответ №2:

Попробуйте это:

 var arr = ["#f00", "#ff0", "#f0f", "#f66"];
$.each(arr, function(key, value) {
    set_color(value);
});

function set_color(color) {
    $('#colorblock').delay('1200').animate({
        backgroundColor: color
    }, 600);
    setTimeout(function() {
        set_color(color);
    }, 2000); //restart in 2 seconds
}

Скрипка:http://jsfiddle.net/maniator/F6nJu/1 /

Комментарии:

1. это работает, спасибо! функция setTimeout (), похоже, не работает, но это неважно, поскольку я установил задержку перед анимацией.

2. @Neal… почему существует setTimeout, если установлена задержка? … если я уберу время ожидания, анимация остановится. Что на самом деле делает setTimeout? заранее спасибо!

3. @superUntitled, это 2 секунды для этого цвета, а не для любого цвета

4. @roXon setTimeout повторяет функцию

5. $.каждый для массива, который не является элементами jQuery? Фу. Используйте цикл for или while.

Ответ №3:

 Array.prototype.recurse = function(callback, delay) {
   delay = delay || 200; 
   var self = this, idx = 0;

   setInterval(function() {
      callback(self[idx], idx);
      idx = (idx 1 < self.length) ? idx 1 : 0;
   }, delay);
}

Попробуйте это на StackOverflow:

 ["#f00", "#ff0", "#f0f", "#f66"].recurse(function(item, index) { 
    $('body').css('background-color', item);
}, 300);

Ответ №4:

 var arr = ["#f00", "#ff0", "#f0f", "#f66"];

(function recurse(counter) {
    var arrLength = arr.length;
    var index = counter%arrLength;

    var color = arr[index];

    $('#colorblock').delay('1200').animate({
       backgroundColor: color
     }, 600);

    setTimeout(function() {
       recurse(counter   1);
    }, 200);

})(0);

Комментарии:

1. Поскольку вопрос был задан и принят через 5 лет после публикации, я рекомендую вам добавить некоторые подробности о том, почему это решение лучше