javascript - 在 Javascript/jQuery 中延迟打印列表中的内容

Question

我有一个 Javascript 字符串列表，我想打印到 HTML div 中。这是 Javascript 代码：

$(document).ready(function(){
list = ["One","Two","Three"];
for (var i = 0; i < list.length; i++){
    $("#content").html(list[i]);
}
});

哪个打印到 ID 为“内容”的 HTML div。但当然只有最后一个字出现。我想要的是控制每个 $("#content").html(list[i]); 之间的延迟。所以我可以一个接一个地看到列表中的每个单词。Javascript 或 jQuery 有解决方案吗？

谢谢 ！

Answer 1

您可以使用setInterval

现场演示

$(document).ready(function(){
 list = ["One","Two","Three"];
 index = 0;
 intr = setInterval(yourfun, 2000);

 function yourfun()
 { 
    $("#content").html(list[index++]);
    if(index == 3) clearInterval(intr);
 }
});

您可以使用append以前添加的内容，在此处查看。

Answer 2

首先，您可以使用$.each()调用而不是for语句

$.each(list , function(){
  setTimeout(function(){
   $("#content").text(this)  
 , 1000)
}

Answer 3

使用 Promise 生成函数：

var list = ["One","Two","Three"];
var waitingTime = 1000;
function promiseToChangeText(i){
    return function (){
              $("#content").text(list[i])
           }
}
for (var i = 0; i < list.length; i++){
    setTimeout(promiseToChangeText(i),
               waitingTime*(i+1));
}

使用每个：

$(document).ready(function () {
    var list = ["One","Two","Three"];
    var waitingTime = 1000;
    $(list).each( function (i,listItem) {
        setTimeout(function (){$("#content").
                                   text(listItem.toString())},
                   waitingTime*(i+1));
    });
});