Question

我试图改变这个循环，改变了多种输入的值：

＆＃13;

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

＆＃13;

<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>

＆＃13;

我需要在每次迭代之间有一个小的延迟。我尝试了一些这样的变种：

＆＃13;

$("#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);

});

＆＃13;

<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>

＆＃13;

它并不像我需要的那样工作。

我需要按顺序更改值，首先输入更改为10（延迟）更改为9（延迟）...第二个输入更改为10（延迟）更改为9（延迟）...依此类推。希望你明白这一点。

我想通过jQuery为它们分配不同的id，然后分别循环遍历每个id，但我需要一个尽可能简短的脚本。

对结构的任何更改都必须使用js。
值更新必须按顺序
每次迭代都必须有延迟
代码必须尽可能简单

我有点卡住了，我很欣赏任何提示。

最终更新 @acontell给出了我在我的问题中处理的例子的完美答案。然而我意识到为什么自从begginnig以来我没有使用next（）：在真正的项目中，输入不是直接的兄弟，它们都在几个容器内。无论如何，@acontell提出的循环很合适，我只需要将元素放在一个数组中，如下所示：

＆＃13;

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);

＆＃13;

<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>

＆＃13;

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，让你成为下一个兄弟。这可以帮助您构建链接列表。列表上的迭代可以使用在没有兄弟姐妹时将被清除的间隔来完成。把它们放在一起：

＆＃13;

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);

＆＃13;

<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>

＆＃13;

只要他们都是兄弟姐妹，就可以有尽可能多的输入。

Answer 3

您是否尝试过等效的线程睡眠？

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

在其他循环

3 个答案: