javascript - 无法了解每种方法的工作原理

我正在尝试每个＆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都在特定时间一起出现？请帮助我找出错误。谢谢！

最佳答案

问题是您的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>