jQuery：通过数组的无限循环......每个（）？答案

【问题标题】：jQuery: infinite loop through array... each()?jQuery：通过数组的无限循环......每个（）？
【发布时间】：2016-10-14 05:06:13
【问题描述】：

在这里提琴： 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);
});

当数组迭代到末尾时，如何重新开始数组迭代（这样动画就永远持续下去）？

【问题讨论】：

既然可以只使用数组索引，为什么还要迭代呢？ i=0; arr[i++ % arr.length]

标签： jquery

【解决方案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.

【讨论】：

我假设你正在使用我的set_color 函数？
请...（我们是来学习的... ;）您的代码的最后一行：})(0); 我玩过数字：0、1、2、3。有趣的事情发生了.这究竟是什么？
@roXon 添加了更多详细信息/cmets。
@Raynos... 你真好！你刚刚获得了+10！（我只是找不到按钮；）好吧... +1
完美解决方案...但是如何切换呢？我正在尝试在 recurse() 上使用 jQuery .toggle() 和 stop() ...

【解决方案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/

【讨论】：

这行得通，谢谢！ setTimeout() 函数似乎不起作用，但没关系，因为我在动画之前设置了延迟。
@Neal...如果设置了延迟，为什么会有 setTimeout？ ...如果我删除超时动画停止。 setTimeout 实际上在做什么？提前致谢！
@superUntitled，该颜色需要 2 秒，而不是任何颜色
@roXon setTimeout 正在递归函数
$.each 对于不是 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);

【讨论】：

在提出并接受问题 5 年后发布我建议您添加一些详细信息，说明为什么此解决方案更好