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
}