在Javascript中监视长任务

I have a particular page that uses lots of widgets that have to be initialized by Javascript routines (around 400, it's a complex one). This takes some time (even 20 secs on slower machines). Now I was thinking I could show a progress indicator (a simple text field with a percentage label), instead of the page, but I discovered that even if I was updating it continuosly, the ongoing task blocks everything and I see no updates. So everything remains frozen until the heavy javascript task completes. I even done the following experiment, but freezes as well (and firefox says that the script is taking too long to complete...):

我有一个特定的页面,它使用了许多必须由Javascript例程初始化的小部件(大约400个,它是一个复杂的小部件)。这需要一些时间(在较慢的机器上甚至需要20秒)。现在我想我可以显示一个进度指示器(带有百分比标签的简单文本字段),而不是页面,但我发现即使我连续更新它,正在进行的任务阻止了所有内容,我看不到更新。所以一切都保持冻结,直到繁重的javascript任务完成。我甚至完成了以下实验,但也冻结了(并且firefox说脚本需要很长时间才能完成......):

function a(){
    for (var i = 0; i < 5000000000000000; i++){
        abb = i;        
    }
}

var abb;

function c(){
    var ef = document.getElementById("pip");
    ef.innerHTML = abb;

}

function b(){

    setInterval(c, 50);
    setTimeout(a, 1000);
}

The only solution that comes to me is to break down the long job in pieces and update the label.... but I was wondering if there is another solution! God, JS needs threads as soon as possible... :)

我遇到的唯一解决方案是分解长篇文章并更新标签....但我想知道是否还有其他解决方案!上帝,JS需要尽快线程...... :)

Any ideas?

3 个解决方案

#1

Can I assume that the scripts are being executed from an onLoad event, so that the user isn't sitting at a blank page while it runs?

我可以假设脚本是从onLoad事件执行的,因此用户在运行时不会坐在空白页面上吗?

If yes, then I'd recommend breaking the scripts into separate functions, creating an array of those functions, iterating through that array and evaling the functions, and updating your progress indicator after every N functions.

如果是,那么我建议将脚本分成单独的函数,创建这些函数的数组,迭代该数组并评估函数,并在每N个函数后更新进度指示器。

And if it's a public-facing website, try to minimize the amount of JavaScript that's absolutely necessary to experience the page. And the amount of initialization that each widget needs. To paraphrase Agent Smith: what good are accordian-fold trees, if nobody waits to see them?

如果它是一个面向公众的网站,请尽量减少体验页面绝对必要的JavaScript数量。以及每个小部件所需的初始化量。用史密斯特工解释:如果没有人等着看,他们会对梧桐树有什么好处呢?

#2

If you want threads you can use LiveConnect and create true Java Threads (if security manager allows it).

如果需要线程,可以使用LiveConnect并创建真正的Java线程(如果安全管理器允许)。

If don't you can use C's coroutines design pattern.

如果没有,你可以使用C的协程设计模式。

Regards.

#3

This works, it's assumed you've got to call b to start it up and have a div with id = "pip"

这是有效的,假设你必须调用b来启动它并拥有一个id =“pip”的div

<html>
<head>
    <script type="text/javascript">

    var i;
    var state = 0;

    function a(){

        switch(state){

        case 0:
            i = 0;
        case 1:
            i++;
            for (; i < 5000000000000000; i++){
                abb = i;
                if (i%1000 == 0){
                    setTimeout(a, 1);
                    state = 1;              
                    return;             
                }                   
            }
        break;
        }
    }

    var abb;

    function c(){
        var ef = document.getElementById("pip");
        ef.innerHTML = abb;

    }

    function b(){

        setInterval(c, 50);
        setTimeout(a, 1000);
    }

    </script>
</head>
<body onload="javascript:b();">
    <div id = "pip">test</div>
</body>
</html>

#1