javascript - 循环结束后重启 jQuery.each()

Question

我有一组值，我想将这些值设置为我输入的占位符。

如何使用 jQuery.each() 实现这一点，因为我用 this solution 解决了我的问题而且效果很好。

我尝试这样做来重新启动它，但它不起作用:

if(index==arr.length) index=0;

HTML代码:

 Values : <input name='input' id='input' />

JS/jQuery 代码:

var arr = new Array();
for (var i = 0; i <= 5; i++) {
    arr.push('Value ' + i);//fill array with values
}

function eachChange(){
   var x=0;
   $.each(arr, function (index, value) {
       x++;
   setTimeout(function(){ 
       $('input').attr('placeholder', value);
      }, x * 1000); 
       if(index==arr.length) index=0;

 });   

}
eachChange();//call function

fiddle : http://jsfiddle.net/charaf11/5ZQgX/

Answer 1

尝试以这种方式重新启动 .each() 循环有两个问题。首先，这不是 .each() 的真正工作方式。它不是一个循环，更多的是在每个元素上调用函数的简写。如果您为该匿名函数命名(让我们使用 setPlaceholder())，则 .each() 调用实质上是这样做的:

setPlaceholder(0, arr[0]);
setPlaceholder(1, arr[1]);
setPlaceholder(2, arr[2]);
setPlaceholder(3, arr[3]);
setPlaceholder(4, arr[4]);
setPlaceholder(5, arr[5]);

它传递给函数的索引值不用于循环目的，因此尝试将其设置为 0 不会对 .each() 调用产生任何影响。

第二个问题是您的 if 条件。它永远不会真正触发，因为 .each() 调用的最终“迭代”将 arr.length - 1 作为其值，而不是 arr .length.

我不确定你为什么想让它一直循环，但如果这是你的目标，你可以像这样完成它:

function eachChange(){
    $.each(arr, function (index, value) {
        setTimeout(function() {
            $('input').attr('placeholder', value);
        }, index * 1000);
        if (index == arr.length - 1) {
            setTimeout(eachChange, (index + 1) * 1000);
        }
    });   

}
eachChange();//call function

应该做的是安排 eachChange() 在最后一次占位符更新发生 1 秒后再次调用。您可以添加一些其他检查来限制它递归的次数，但如果您希望它无限期地发生，那应该可以解决问题。

Here's an updated fiddle demonstrating it.