Question

我有一个旨在解析20MB XML文件的函数。它运作良好，但我想在一分钟左右给出一些进度指示。

然而，这不起作用：

<head>

<script type="text/javascript">

function pauseJS(timeInMilliS) {
    var date = new Date();
    var curDate = null;
    do { curDate = new Date(); }
    while(curDate-date < timeInMilliS);
}

function process() {
    for (var i = 0; i<=10; i++) {
        document.images["bar"].width += 5;
        document.images["bar"].height = 5;      
        pauseJS(500);
    }
}
</script>

</head>

<body>
    <input type="button" value="Go" onClick="process()"> 
    <img src="black.gif" name="bar" width=1 height=5 />
</body>

（pauseJS代表处理）进度条只会在处理完成后更新，而不是在。

期间更新

我看到了similar question，但在这种情况下，setTimeout似乎没有帮助。

Answer 1

setTimeout正是你如何处理这个问题，但你必须正确构建你的解析函数。您要做的 last 事件是pauseJS中显示的忙等待。这不会暂停JavaScript，这会让JavaScript疯狂地运行，直到达到时间或浏览器取消脚本过度消耗。： - ）

要让浏览器片刻更新页面显示，您必须使JavaScript线程返回到浏览器。例如，这不起作用：

var TOTAL = 10000000;
var BATCH = 10000;

function doSomething() {
    for (n = 0; n < TOTAL; ++n) {
        if ((n % BATCH) == 0) {
            // ...change progress indicator...
        }

        // ...do processing...
    }
}

...因为它永远不会产生。另一方面，这有效：

var TOTAL = 10000000;
var BATCH = 10000;

function doSomething() {
    var n = 0;

    work();

    function work() {
        var maxn = Math.min(n + BATCH, TOTAL);

        for ( ; n < maxn; ++n) {
            // ...do processing...
        }

        // ...update progress indicator...

        if (n < TOTAL) {
            setTimeout(work, 0);
        }
    }
}

正如您所看到的，这里我们将工作分解为不连续的批处理，并定期停止，安排下一批工作，并将控制权返回给浏览器。这给了它一个更新页面的时刻，之后它会回拨给我们（不是在字面上0ms之后，但是下一次可以，但通常需要更新自己加上5-10ms）。

Answer 2

Javascript只有一个帖子，这意味着你不可能同时做多件事。

你必须打破XML处理功能，这样才能完成一大堆工作，更新进度条等等。

Javascript：如何在onClick完成之前更新页面？

2 个答案: