jquery使用带循环的延迟答案

【问题标题】：jquery using delay with loopjquery使用带循环的延迟
【发布时间】：2016-08-02 08:32:06
【问题描述】：

我有一个包含 3 个项目的数组。我想显示每个项目之间的延迟并删除前一个项目。我的代码适用于显示每个项目，但我无法删除前一个项目。如果我在每个循环的末尾添加 html('') .. 由于延迟，它将在项目显示之前删除所有内容。这里是 jsfiddle https://jsfiddle.net/qawzzzjz/

<div class='view'>
</div>

var arr = ['First', 'Second', 'Third'];

for(var i=1; i<arr.length+1; i++){
$("<h3 style='display: none;'>"+arr[i-1]+"</h3>").appendTo('.view').delay(1000*i).fadeIn(500);

}

我也试过这段代码，但它只显示第三项

var arr = ['First', 'Second', 'Third'];

for(var i=1; i<arr.length+1; i++){
$('.view').html("<h3>"+arr[i-1]+"</h3>").delay(1000*i);;
}

【问题讨论】：

你需要延迟循环，而不是显示代码

标签： javascript jquery

【解决方案1】：

只需在行尾添加 FadeOut 即可。见例子：

var arr = ['First', 'Second', 'Third'];

for(var i=1; i<arr.length+1; i++){
	$("<h3 style='display: none;'>"+arr[i-1]+"</h3>").appendTo('.view').delay(1000*i).fadeIn(500).fadeOut(500);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = 'view'>
  
</div>

【讨论】：

【解决方案2】：

如果您使用 setTimeout（.delay 在幕后使用），您可以在添加新的之前删除上一个。如果您愿意，您甚至可以在其上添加淡出效果，而不是删除，只要您想要的任何东西：p

var arr = ['First', 'Second', 'Third'];

for(var i=0; i<arr.length; i++){
  setTimeout(function(val) {
  if(val!==0){
    	$('.view').children()[0].remove();
    }
    $("<h3 style='display: none;'>"+arr[val] +"</h3>").appendTo('.view').fadeIn(500);
  }, 1000*i, i);
	

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='view'>

</div>

可能有助于您理解代码的帖子：other question

【讨论】：