javascript - 在javascript / jquery中重复特定时间后添加div标签

Question

我需要将附加 10 个 div 标签添加到另一个标签，但在附加每个标签之前我需要等待随机时间，如下所示：

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

我尝试实现自己的睡眠（时间）；像这里一样的功能，但它对我不起作用，因为它会挂起任何页面事件，直到等待（时间）完成

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/