显示javascript执行进度

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

在此期间，浏览器处于冻结状态。在开始操作之前，我试着显示一个“加载”动画（gif图像），并在后面隐藏它。但它就是不起作用。浏览器在渲染图像之前冻结，并在函数结束时立即隐藏图像

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

---

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

也许您可以在显示动画gif和运行繁重代码之间设置一个延迟

显示gif，然后调用：

window.setTimeout(myFunction, 100)

---

在“myFunction”中执行繁重的操作。

尝试在运行函数之前设置一个

wait

光标，然后将其删除。在jQuery中，您可以这样做：

var body = $('body');
body.css("cursor", "wait");
lengthyProcess();
body.css("cursor", "");

---

这是因为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();

---

您必须使用更复杂的技术来显示长时间运行函数的进度

假设您有这样一个运行时间足够长的函数：

function longLoop() {
    for (var i = 0; i < 100; i++) {
        // Here the actual "long" code
    }
}

函数longLoop（）{
对于（变量i=0；i<100；i++）{
//这里是实际的“长”代码
}
}

为了保持界面的响应性并显示进度（同时避免在某些浏览器中出现“脚本花费的时间太长…”消息），您必须将执行分为几个部分

function longLoop() {
    // We get the loopStart variable from the _function_ instance. 
    // arguments.callee - a reference to function longLoop in this scope
    var loopStart = arguments.callee.start || 0;

    // Then we're not doing the whole loop, but only 10% of it
    // note that we're not starting from 0, but from the point where we finished last
    for (var i = loopStart; i < loopStart + 10; i++) {
        // Here the actual "long" code
    }

    // Next time we'll start from the next index
    var next = arguments.callee.start = loopStart + 10;
    if (next < 100) {

        updateProgress(next); // Draw progress bar, whatever.
        setTimeout(arguments.callee, 10);
    }
}

函数longLoop（）{
//我们从_函数u实例获取loopStart变量。
//arguments.callee-此作用域中对函数longLoop的引用
var loopStart=arguments.callee.start | | 0；
//然后我们不做整个循环，只做了10%
//请注意，我们不是从0开始，而是从最后完成的点开始
对于（var i=loopStart；i

---

我没有测试过这段实际代码，但我以前使用过这种技术。

您是否尝试过将javascript放入window.onload事件中？@SLC它不属于其中，如果没有jQuery，它甚至更短

document.body.style.cursor=“wait”

。不可思议@事实上，它更长

document.body.style.cursor=“wait”

与

$（'body'）.css（'cursor'，'wait'）

相对应，但我同意应该始终使用可用的最简单方法。这取决于您是否已经在使用jQuery来获取更实质的内容。