javascript - 异步调用函数？

Question

我有一个昂贵的函数，createNewWindow()。我想在调用方法时显示进度指示器，然后在函数完成时隐藏该指示器。不过，我尝试过的一切，在方法完成之前我都看不到进度指示器，所以我试图异步调用该方法（并且失败）。

我试过这个：

$( "#submit" ).click( function () {
    $("#progress").show();
    $.Deferred(createNewWindow());
} );

createNewWindow 的最后一行是 $("#progress").show()。没用。在此之前我尝试过：

$( "#submit" ).click( function () {
    $("#progress").show();
    setTimeout(createNewWindow(), 0);
} );

一样的效果。

这样做的正确方法是什么？

我看到了一些类似这样的其他 SO 帖子，这些帖子描述了使用 setInterval 或 setTimeout，但我无法让它们像我期望的那样工作。

score 3 · Accepted Answer

这是一个常见的错误。问题就在这里：

setTimeout(createNewWindow(), 0);

这将createNewWindow立即调用并将结果（可能是无效的）传递给setTimeout. 这不是您想要的，您想将函数 createNewWindow传递setTimeout给它以便稍后调用它：

setTimeout(createNewWindow, 0);

注意缺少的括号。您将createNewWindow（这是一个函数）的值传递给setTimeout，而不是调用它并传递它的返回值。

这应该会立即显示进度条。但是，如果createNewWindow是一个消耗大量资源的非常昂贵的函数，它仍然会减慢您的网页速度，因为您的所有 JavaScript 代码都在同一个线程中运行。在这种情况下，您可能需要考虑使用Worker.

1 回答 1