Javascript延迟函数[重复]

Question

我正在构建一个 JavaScript 库。我一直在研究一个像这样工作的延迟函数：

function delay(ms) {
    var start = new Date().getTime();
    for (var i = 0; i < 1e7; i++) {
        if ((new Date().getTime() - start) > ms){
            break;
        }
    }
}

我的想法是我可以做这样的事情：

window.onload = function() {
  delay(5000);  //this function will act 5 seconds after the page loads
  document.getElementById('Header').innerHTML = 'Welcome';
};

延迟工作正常，但它会停止页面上的所有 javascript，而不仅仅是延迟 window.onload 函数。

有人知道我能做什么吗？

Answer 1

使用 setTimeout 代替您的延迟方法。它不会阻塞 UI，而且更干净。

setTimeout(function() {
   document.getElementById('Header').innerHTML = 'Welcome';
}, 5000);

Answer 2

我认为您的问题（以及对Patrick D's answer 的回复）是基于误解。

没有办法实现你想要的代码。

JavaScript 环境是单线程的。 （让我们暂时忽略网络工作者。）这意味着每一行都在它之前的那一行之后执行。

如果您有一个函数占用这个（一个且唯一的）线程 5 秒，那么在这 5 秒内不会运行其他任何东西。就这么简单。

我们在 JavaScript 世界中解决这个问题的方法是利用异步编程，它利用回调。 setTimeout 函数是解决这个问题的正确方法。

现在，您可以这样做了。假设您想要一个函数，给定某个函数fn，返回一个新函数，该函数在设定的延迟后执行fn。你可以实现这个：

Function.prototype.delay = function(ms) {
    var fn = this;
    return function() {
        setTimeout(fn, ms);
    };
};

然后您可以假设编写如下代码：

function foo() {
  // something or other
}

var fooDelayed = foo.delay(5000);

// Now this line will execute foo after 5 seconds.
fooDelayed();

如果你真的想要这样的东西，这是可能的。但它本质上仍然是setTimeout 的包装：这是无法避免的。

请参阅 this jsFiddle 演示该想法。

Answer 3

如果你真的想围绕setTimeout() 构建一个函数，你可以这样做：

function delay(ms, callback) {
  setTimeout(callback, ms);
}

绝对没有其他方法可以延迟代码块的操作或执行没有阻塞机制。

而且因为setTimeout() 是异步执行的，所以你总是要提供一个回调函数！