javascript - Javascript/jQuery で遅延のあるリストからコンテンツを印刷する

Question

HTML div に出力したい Javascript の文字列のリストがあります。これは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

プロミス生成関数を使用する:

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));
    });
});