3

我正在处理一种围绕 4000 个元素的“大”JSON 对象，它为不同的方法传递，我想div用显示该过程的文本更新标签。

但出于某种奇怪的原因（刚刚在 Firefox 和 Chrome 中测试过），它们不会使用文本更新 DOM 对象。

$("#estatusBar").text(_item.Centro_de_trabajo);

两者都喜欢继续计算所有数据和其他过程，而无需花时间更新文本。但是，如果我只是Alert("")在循环中编写一个代码，然后在 chrome 中单击“选定框”说忽略所有其他警报，则 chrome 突然开始更新文本。

所以我在想我是否可以用某种代码“暂停”计算以停止和更新 DOM 元素，然后继续进行另一个过程？

这是可能的还是这种奇怪行为的替代方法？

- 编辑 -

这是循环的代码

    $.each(plantillas, function(_index, _item){
        updateBar(_item.Centro_de_trabajo);
        calculateItem(_item,_index);
        a.push("<div class='blockee'><ul>"+ /*temp.join("")*/ t(_item) +"</ul></div>");
    });
4

3 回答 3

1

No you cannot do what alert does. This limitation is really annoying in some cases but if your problem is just a progress for a single long computation then the solution is simple.

Instead of doing alll the records in one single loop break the computation in "small enough" chunks and then do something like

function doit()
{
    processBlockOfRecords();
    updateProgressBar();
    if (!finished()) {
        setTimeout(doit, 0);
    }
}

setTimeout(doit, 0);

With this approach is also simple to add an "abort" button to stop the computation.

In your example the loop is

$.each(plantillas, function(_index, _item){
    updateBar(_item.Centro_de_trabajo);
    calculateItem(_item,_index);
    a.push("<div class='blockee'><ul>"+ /*temp.join("")*/ t(_item) +"</ul></div>");
});

so the computation could be split with (untested)

function processRecords(plantillas, completion_callback) {
    var processed = 0;
    var result = [];

    function doit() {
        // Process up to 20 records at a time
        for (var i=0; i<20 && processed<plantillas.length; i++) {
            calculateItem(plantillas[processed], processed);
            result.push("<div class='blockee'><ul>" +
                        t(plantillas[processed]) +
                        "</ul></div>");
            processed++;
        }

        // Progress bar update
        updateProgress(processed, plantillas.length);

        if (processed < plantillas.length) {
            // Not finished, schedule another block
            setTimeout(doit, 0);
        } else {
            // Processing complete... inform caller
            if (completion_callback) completion_callback(result);
        }
    }

    // Schedule computation start
    setTimeout(doit, 0);
}
于 2013-04-19T17:56:39.337 回答
1

您可以尝试使用web workers，将计算推迟到后台，这应该可以帮助您。网络工作者被设计来做这件事（将大量计算推送到后台线程）。但是，这可能不适用于所有浏览器。您主要关心的是 IE，并且只有 IE 10 支持它：

在此处输入图像描述

于 2013-04-19T17:52:24.030 回答
0

你想要一些版本的等待或暂停或睡眠或类似的 javascript 是吗？

唯一的方法是与

window.setTimeout()

您可以使用它暂停任何功能。

检查这篇文章也可能会有所帮助： Sleep/Pause/Wait in Javascript

于 2013-04-19T17:53:19.407 回答