如何编写一个等待给定毫秒的JavaScript函数[重复]

Question

我试图做的是编写一个函数，例如：

function delay(delay){
    var date = new Date();
    var startTime = date.getTime();


    var currDate=new Date();
    var current=currDate.getTime();

    while (current<=startTime+delay){
        currDate=new Date();
        current=currDate.getTime();
    }
}

在执行此类操作时，此代码似乎可以完美运行

console.log("1");
delay(500);
console.log("2");

当做这样的事情时，它会打印到控制台1，然后等待半秒，然后打印出2。问题是我不想console.log，我想document.getElementById("id").innerHTML+="a";。当尝试围绕延迟功能时，页面会等待所有延迟完成，然后再加载任何 a。

我的问题如下：

是否有一个好的方法来编写这样的函数，或者已经有一个函数可以允许所有之前的代码运行，导致指定的延迟，然后运行它之后的代码。我试过使用setTimeout，但问题是运行这样的东西：

console.log("1");
setTimeout(function(){
    console.log("2");
}, 2000);
console.log("3");

导致它打印 1，然后打印 3，然后等待 2 秒并打印 2，而不是执行 1，等待 2 秒，打印 2，打印 3

澄清：我试图实现这一点的方式是：

for (i=0;i<10;i++){
    document.getElementById("text")+="a";
    delay(500);    
}

这段代码应该做的是一次打印一个字母到屏幕上，每个字母打印之间有半秒

Answer 1

您可以使用回调实现类似的功能：

function execute_after_delay( cb, msg, delay ){
   setTimeout(function(){
       console.log("2");
       cb(msg);
   }, delay);
}
console.log("1");
execute_after_delay(console.log, 3, 2000);

Answer 2

setTimeout 是正确的方法。

你会想要的

console.log("1");
setTimeout(function(){
    console.log("2");
    console.log("3");
}, 2000);

将记录“1”，等待 2 秒，然后按顺序记录“2”和“3”。

您的示例不起作用的原因是setTimeout 是异步的。这意味着传递给setTimeout 的函数在setTimeout 被调用后的2 秒内被调度，但程序将继续执行以下任何行。任何你想等到延迟之后的东西都应该在 setTimeout 内的块中。

如果您想在延迟后进一步延迟，您可以在回调函数中调用setTimeout。

例如：

console.log("1");
setTimeout(function(){
    console.log("2");
    setTimeout(function() {
        console.log("3");
    }, 1000);
}, 2000);

这将记录“1”，等待 2s，记录“2”，等待 1s，然后记录“3”。

--

有延迟的循环：

当 () { 控制台.log("1"); (2000); 控制台.log("2"); 控制台.log("3"); }

变成

var loop = function() {
  console.log("1");
  setTimeout(function() {
    console.log("2");
    console.log("3");
    if (<condition>) {
      loop();
    }
  });
};

请注意，对于大量迭代，您可能会超出可用堆栈。在这种情况下，您可以采取一些解决方法，例如 setTimeout(loop, 0);