在函数执行期间显示JavaScript加载器图像

Question

我想点击一个按钮，在显示加载动画后，执行一项耗时的任务，并在执行完毕后隐藏加载动画。但是当我尝试这样做时，页面会直到整个事件运行完毕才解除冻结，因此加载动画从未被看到。

以下是示例：

$('#btn').click(function() {
    $('#LoadingImage').show();
    <time consuming function>
    $('#LoadingImage').hide();
});

如何明显地显示加载图像，更新屏幕，运行函数并隐藏加载图像？

- David

Answer 1

虽然你现在拥有的代码应该能够工作，但试试这样做：

$('#btn').click(function() {
    $('#LoadingImage').show();
    setTimeout(function() {
        <time consuming function>
        $('#LoadingImage').hide();
    }, 0);
});

这将逃避事件的调用堆栈。

如果那还不起作用，那么请提供更多关于这个耗时函数的细节。

- Paolo Bergantino

---

这里的想法相同，不过你是不是要把hide()调用放到setTimeout里，在耗时代码执行后再执行呢？ - Elliot Nelson

它的原因是什么？使用setTimeout函数它是如何工作的，你能解释一下吗？ - Twix

@Twix：https://dev59.com/questions/-nRA5IYBdhLWcg3w8SaJ - Paolo Bergantino

Answer 2

由于各种原因，JS必须在主线程上执行，这意味着只要JS在执行，绘画就会被阻塞 - 即使像Chrome这样的多进程架构也无法重新绘制正在执行JS的选项卡。

您唯一的方法是拆分函数的执行，或将函数移动到html5工作线程上 - 它们仅适用于Firefox和Safari的测试版（或更一般地说，任何足够新的WebKit版本）。

- olliej