Question

我正在尝试每个＆amp; setTimeout函数。我希望名字的字母会显得与众不同。在单独的（渐进的）时间。假设，NAZ的字母应该以这种方式出现，前N秒A最后Z.但是，在这里我可以看到输出是AZN然后ZNA然后是NAZ。我的感受，我对“每个”的实际运作方式有一个错误的理解。但是，控制台中的输出完全按照我的意图显示。看看这个。

    $('div.promise').each(function(index, promise){
        setTimeout(function()

            {
                $('.showPromise').append(promise);
                console.log($(promise).text());

$('.promise').css({"display":"block"})},1000*(index+2));    

});}

https://jsfiddle.net/sanje/425konu3/17/

如何在控制台中显示输出？＆安培;为什么所有的div在某个时间完全出现？请帮我找出错误。谢谢！

Answer 1

问题出在setTimeout：

中

$('.promise').css({"display":"block"})

它使所有div与类promise一起可见。你应该改用它：

$(promise).css({"display":"block"})

var showAnimation=function(){
		
		$('div.promise').each(function(index, promise){
			setTimeout(function(){
					// $('.showPromise').append(promise);
					console.log($(promise).text());
	        $(promise).css({"display":"block"})
      },1000*(index+2));
	  });//each()
  }//showAnimation()
$('button').on('click', showAnimation);

.promise {
  display: none;
  padding: 10px;
}

.showPromise {
  background-color: red;
  margin: 10px;
  display: flex;
  height: 100px;
  width: auto;
}



.as-console-wrapper{display: none !important;}

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
 
<button>call</button>
<div class="showPromise">
  <div class="promise">N</div>
  <div class="promise">A</div>
  <div class="promise">Z</div>
</div>

Answer 2

您每次都在全班设置显示。您只需要在循环中显示每个实例。您可以使用show()简化并执行此操作。

append()部分确实没有多大意义，所以我删除它

＆＃13;

var showAnimation = function() {

  $('div.promise').each(function(index, promise) {
    setTimeout(function() {
        $(promise).show();
      }, 1000 * (index + 2));
  });
}
$('button').on('click', showAnimation);

＆＃13;

.promise {
  display: none;
  padding: 10px;
}

.showPromise {
  background-color: red;
  margin: 10px;
  display: flex;
  height: 100px;
  width: auto;
}

＆＃13;

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<button>call</button>
<div class="showPromise">
  <div class="promise">N</div>
  <div class="promise">A</div>
  <div class="promise">Z</div>
</div>

＆＃13;

Answer 3

@charlietfl也许，我可以弄清楚这里发生了什么。请查看现有代码

    $('.showPromise').append(promise);
    $('.promise').show();},1000*(index+2));
https://jsfiddle.net/425konu3/20/

输出： AZN（显示然后隐藏） ZNA（显示然后隐藏） NAZ（坚持）

我问这里有什么黑客，为什么不NAZ NAZ NAZ。事实证明，当追加将所选元素移动为最后一个子元素时。所有的div都可以通过$（'。promise'）。show（）来显示，它们以第一个div作为最后一个附加的方式显示，而下一个相邻的div位于0指数＆amp;其余的就在旁边。

第一次，N追加（最后一个索引），A（索引0），Z（索引1），因此出现AZN。第二次，A附加（最后一个索引），Z（索引0），N（索引1），因此出现ZNA。上次，Z附加（最后一个索引），N（索引0），A（索引1），因此出现NAZ。

无法理解每种方法如何在这里工作

3 个答案: