javascript - javascript/jqueryで繰り返し特定の時間後にdivタグを追加します

Question

別の div タグに 10 個の div タグを追加する必要がありますが、次のように、それぞれを追加する前にランダムな時間を待つ必要があります。

function start()
{
      for (var i= 0; i< 10; i++)
      {
          var time = generateRandomWaitingTime();
          sleep(time);
          $('#div1').append('<div> div num' + i + '</div>');
      }
}

独自の sleep(time); を実装してみました。ここのように機能しますが、待機（時間）が終了するまでページイベントがハングするため、うまくいきませんでした

Answer 1

setTimeoutおよびクロージャーを使用する必要があります。

//closure
var addElement = function(i){
   return function(){
        $('#div1').append('<div> div num' + i + '</div>');
   };
};

function start() {
    for (var i = 0; i < 10; i++) {
        var time = generateRandomWaitingTime();

        setTimeout(addElement(i), time);
    }
}

リビングデモ: http://jsfiddle.net/JaR34/

アップデート：

リビングデモ: http://jsfiddle.net/JaR34/1/

Answer 2

setTimout()はまさにあなたが探しているもののようです。

Answer 3

これを試して：

var elements = [1000,2000,3000,4000,5000,6000,7000];

function generateRandomWaitingTime(){

    //will give you random index
    var index = Math.floor((Math.random()*elements.length));
    return (elements[index]);
}

function appendDiv(i){

    var time = generateRandomWaitingTime();

    setTimeout(function () {
       $('#div1').append('<div> div num' + i + '</div>');
    }, time);
}

for (var i = 0; i < 10; i++) {
    appendDiv(i)
}

ここで働くフィドル：http://jsfiddle.net/6neFA/1/