在另一個循環內延遲循環

Question

我正在嘗試轉換此循環，以更改可變數量的輸入的值：

 $("#wrap input").each(function( index ) { for( i = 10 ; i > 0 ; i--) { $(this).val(i); console.log( index + ": " + $(this).val() ); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrap"> <input type="text"> <input type="text"> <input type="text"> </div> 

我需要在每次迭代之間有一個小的延遲。 我正在嘗試一些變化：

 $("#wrap input").each(function( index ) { var a = $(this); var i = 10; var loop = setInterval(function() { a.val(i); console.log( index + ": " + a.val() ); i--; if(i==0) clearInterval( loop ); },1000); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrap"> <input type="text"> <input type="text"> <input type="text"> </div> 

它不像我需要的那樣工作。

我需要按順序更改值，第一個輸入更改為10（延遲）更改為9（延遲）...第二個輸入更改為10（延遲）更改為9（延遲）...依此類推。 希望你能明白。

我正在考慮通過jQuery為它們分配不同的ID，然后分別遍歷每個ID，但是我需要一個盡可能簡短的腳本。

• 對結構的任何更改都必須使用js完成。
• 價值更新必須井井有條
• 每次迭代都必須有一個延遲
• 代碼必須盡可能簡單

我有點卡住，我很感謝任何提示。

最終更新： @acontell為我在問題中處理的示例給出了完美的答案。 但是我意識到為什么自從開始以來就不使用next（）：在實際項目中，輸入不是直接的同級，它們分別位於幾個容器中。 無論如何，@ acontell提出的循環都適合，我只需要將元素放入數組中，如下所示：

 var list = []; $("#wrap input").each(function(index) { list.push($(this)); }); var i = 10; // Countdown start var n = 0; // Array index var loop = setInterval(function() { if (n > list.length - 1) { clearInterval(loop); } else { list[n].val(i--); if (i < 0) { n++; i = 10; } } }, 100); 

 <div id="wrap"> <div><div><div><input type="text"></div></div></div> <div><div><div><input type="text"></div></div></div> <div><div><div><input type="text"></div></div></div> <div><div><div><input type="text"></div></div></div> <div><div><div><input type="text"></div></div></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 1

每當需要延遲迭代時，使用自調用函數而不是循環都是有意義的。

function doStuff(data, i){
   //do things here
   console.log(i)
   if(--i) setTimeout(function(){doStuff(data, i)}, 1000)
   else nextStep(data)
}

function nextStep(data){
  //after the loop ends, move to the next step of your code
}

doStuff([], 10)

Answer 2

我不確定自己要做什么，但是如果要等待每個輸入中的每個計數器完成然后啟動下一個計數器，就想到了一個鏈接列表。

jQuery提供了next方法，可讓您獲得下一個兄弟姐妹。 這可以幫助您建立鏈接列表。 列表上的迭代可以使用一個間隔來完成，該間隔將在沒有更多同級對象時清除。 放在一起：

 var $element = $("#wrap input:first"), countdownLimit = 10; var loop = setInterval(function() { if (!$element.length) { clearInterval(loop); } else { $element.val(countdownLimit--); if (countdownLimit < 0) { $element = $element.next('input'); countdownLimit = 10; } } }, 1000); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrap"> <input type="text"> <input type="text"> <input type="text"> </div> 

只要它們都是同級，就可以有任意多個輸入。

Answer 3

您是否嘗試過相當於線程睡眠的方法？

var millisecondsToWait = 500;
setTimeout(function() {
    // Whatever you want to do after the wait
}, millisecondsToWait);