javascript - 调用函数时显示加载图像

Question

我试图在运行 javascript 函数时显示加载图像。它处理大量数字，在速度较慢的电脑上运行可能需要几秒钟。

我以为这行得通

function myFunction(){;
    $('#loading').show();
    // The bit that takes ages to run
    $('#loading').hide();
}

然而，它并没有隐藏#loading div。

有一个更好的方法吗？

Answer 1

不幸的是没有。由于 JavaScript 是单线程的，它在加载完成之前不会更新加载图像的可见性，此时您已经告诉它再次隐藏。

此外，即使它确实有效，动画 GIF 也不会出于同样的原因播放，它只会显示为冻结状态。

这里的最佳解决方案是使用 Web Workers，但是这些非常先进，并且只能在最新的浏览器中使用。

下一个最好的事情是按照以下方式做一些事情：

function myFunction() {
    $("#loading").show();
    setTimeout(function() {
        // long code here
        $("#loading").hide();
    },1); // give it a moment to redraw
}