显示javascript执行进度 [英] Show javascript execution progress

问题描述

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

I have some javascript functions that take about 1 to 3 seconds. (some loops or mooML templating code.)

在此期间，浏览器刚刚冻结。我尝试在开始操作之前显示加载动画（gif图像）并在之后隐藏它。但它只是不起作用。浏览器在渲染图像之前会冻结，并在函数结束时立即隐藏它。

During this time, the browser is just frozen. I tried showing a "loading" animation (gif image) before starting the operation and hiding it afterwords. but it just doesnt work. The browser freezes before it could render the image and hides it immediately when the function ends.

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

Is there anything I can do to tell the browser to update the screen before going into javascript execution., Something like Application.DoEvents or background worker threads.

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

So any comments/suggestions about how to show javascript execution progress. My primary target browser is IE6, but should also work on all latest browsers

推荐答案

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

This is due to everything in IE6 being executed in the same thread - even animating the gif.

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

The only way to ensure that the gif is displayed prior to starting is by detaching the execution.

function longRunningProcess(){
    ....

    hideGif();
}

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

但是这仍会使浏览器冻结，而 longRunningProcess 执行。

为了允许交互，你必须将你的代码分成更小的片段，也许就像这样

But this will still render the browser frozen while longRunningProcess executes.
In order to allow interaction you will have to break your code in to smaller fragments, perhaps like this

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();

这篇关于显示javascript执行进度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！