异步调用函数？

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。