在调用函数时显示加载图像

Question

我试图在javascript函数运行时显示加载图像.它可以处理很多数字,在较慢的PC上运行可能需要几秒钟.

我认为这会奏效

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
}