javascript - 无法理解这里每种方法是如何工作的

Question

我正在尝试使用 every & 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"})

它使所有具有 promise 类的 div 一起可见。你应该使用这个:

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