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而不是延迟方法。它不会阻止用户界面，而且更加清晰。

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()异步，你总是需要提供一个回调函数！

Javascript延迟功能

3 个答案: