javascript - 配列を遅延させて一度に 1 つずつ表示するにはどうすればよいですか?

Question

各 div はブロックとして表示され、ページの準備ができたら表示を開始したい

<div id="blocks">


</div>

ここにコードを入力してください

var mainArray = new Array();

mainArray[0] = "<div class='tile'> </div>"
mainArray[1] = "<div class='tile'> </div>"
mainArray[2] = "<div class='tile'> </div>"
         //adds to #blocks
for (var i = 0; i < mainArray[i].length; i++) {
$('#blocks').append(mainArray[i])
};

Answer 1

setTimeout() を使用してみてください

var mainArray = new Array();

mainArray[0] = "<div class='tile'>1</div>"
mainArray[1] = "<div class='tile'>2</div>"
mainArray[2] = "<div class='tile'>3</div>"
//adds to #blocks
for (var i = 0; i < mainArray.length; i++) {
    (function(idx){
        setTimeout(function(){
            $(mainArray[idx]).hide().appendTo('#blocks').fadeIn()
        }, idx * 2000)
    })(i)
};

デモ:フィドル