在执行功能时显示javascript加载程序图像

Question

我想单击一个按钮,显示一个加载器图像,执行一个耗时的功能,隐藏加载器图像.当我尝试这个时,页面冻结直到整个事件运行,因此从未看到加载器图像.

这是一个示例:

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

如何清楚地显示加载器图像,更新屏幕,运行功能,隐藏加载器图像？

Answer 1

虽然你有什么应该工作,试试这样做:

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

这将转义事件的调用堆栈.

如果这不起作用,那么发布关于这个神秘的耗时功能是什么的更多细节.