异步调用函数？

Question

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

我试过这个：

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

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

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

同样的效果。

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

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

Answer 1

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

setTimeout(createNewWindow(), 0);

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

setTimeout(createNewWindow, 0);

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

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