javascript - 在Jquery中添加带有数组信息的元素，延迟一些时刻

Question

我有一些数据的数组，我想在运行时将其附加到 Div 中，并希望该数据以慢动作动画显示。

offers.forEach(function (offer) {
   $("#result_area").append("<div class='alert bg-pink'>" + offer + "</div>");
});

我正在使用此代码将数据附加到 #result_area div 中，它工作正常，但会立即加载完整的数据，而我想一一显示数据，但有时会中断。

Answer 1

使用jquery的delay

offers.forEach(function (offer) {
   $("#result_area").delay( 1000 , "divQueue" ).append("<div class='alert bg-pink'>" + offer + "</div>");
});

或者将setTimeout与计数器一起使用

counter = 0;
offers.forEach(function (offer) {
   setTimeout( function(){
       $("#result_area").delay( 1000 , "divQueue" ).append("<div class='alert bg-pink'>" + offer + "</div>");
   }, (++counter * 1000) );
});

演示

var offers = [
  ["offer1", "10"],
  ["offer2", "20"],
  ["offer3", "30"],
  ["offer4", "40"],
  ["offer5", "50"],
  ["offer6", "60"],
  ["offer1", "70"],
  ["offer1", "80"]
];
for (let i = 0; i <= 4; i++) {
  setTimeout(function() {
    $("#result_area").append("<div class='innerdiv'><h4 style='float:left'>" + offers[i][0] + "</h4><h4 style='float:right'> " + offers[i][1] + "</h4></div>");
  }, (i * 500));

}

.innerdiv {
  height: 25px;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result_area">

</div>