javascript - 显示 javascript 执行进度

Question

我有一些 javascript 函数大约需要 1 到 3 秒。 (一些循环或 mooML 模板代码。)

在此期间，浏览器只是卡住。我尝试在开始操作之前显示“加载”动画(gif 图像)并在之后隐藏它。但它就是行不通。浏览器在渲染图像之前卡住，并在函数结束时立即隐藏它。

在执行 javascript 之前，我可以做些什么来告诉浏览器更新屏幕。，比如 Application.DoEvents 或后台工作线程。

关于如何显示 javascript 执行进度的任何意见/建议。我的主要目标浏览器是 IE6，但也应该适用于所有最新的浏览器

Answer 1

这是因为 IE6 中的所有内容都在同一个线程中执行 - 甚至动画 gif。

确保在开始之前显示 gif 的唯一方法是分离执行。

function longRunningProcess(){
    ....

    hideGif();
}

displayGif();
window.setTimeout(longRunningProcess, 0);

但这仍然会导致浏览器在 longRunningProcess 执行时卡住。
为了允许交互，您必须将代码分成更小的片段，也许像这样

var process = {
    steps: [
        function(){
            // step 1
            // display gif
        },
        function(){
            // step 2
        },
        function(){
            // step 3
        },
        function(){
            // step 4
            // hide gif
        }
    ],
    index: 0,
    nextStep: function(){
        this.steps[this.index++]();
        if (this.index != this.steps.length) {
            var me = this;
            window.setTimeout(function(){
                me.nextStep();
            }, 0);
        }
    }
};

process.nextStep();