如何在 Javascript 中进行线程处理 [英] How to do Threading in Javascript

问题描述

所以我有一个从服务器返回的大型 JSON 对象，然后从中构建一个数据表并将其显示在表单上.这通常需要几秒钟..所以我在考虑加载栏.我在加载栏后面有逻辑，但是构建 hmtl 数据的循环正在锁定浏览器，我无法调用我需要更新的元素.

So I have a large JSON object i'm returning from the server, then building a datatable from it and displaying it on the form. This usually takes a few seconds.. so I was thinking of a loading bar. I have the logic behind the loading bar, however the loop that builds the hmtl data is locking down the browser and I cannot call out to the element i need to update.

这是我的功能:

function buildDataTable(db_table, container_id) {
    var $pb = $("<div id="progress-bar"></div>");
    $(container_id).html($pb);
    $pb.progressbar({
        value: 0
    });
    $.post("post location", {
        view: "all"
    }, function (data) {
        var headers = "";
        var contents = "";
        var jsonObject = $.parseJSON(data);
        var tik = Math.round(jsonObject.length / 100);
    for (key in jsonObject[0]) {
            headers += "<th>" + key.replace(" ", "&nbsp;") + "</th>";
        }
        for (i in jsonObject) {
            contents += "<tr>";
            for (j in jsonObject[i]) {
                contents += "<td class="border-right">" + jsonObject[i][j] + "</td>";
            }
            contents += "</tr>";
            if(Math.round(i/tik) == i/tik) {
/* if I run the alert (between popups) i can see the progressbar update, otherwise I see no update, the progressbar appears empty then the $(container_id) element is updated with the table i've generated */
                alert(''); 
                $pb.progressbar("value",i/tik);
            }
        }
        var html = "<table cellpadding="5" cellspacing="0"><thead><tr>" + headers + "</tr></thead><tbody>" + contents + "</tbody></table>";

        $(container_id).html(html);
        $(container_id).children("table:first").dataTable({
            "bJQueryUI": true,
            "sScrollX": "100%"
        });
    });
}

推荐答案

[添加我的评论作为答案]

JavaScript 是单线程的.您必须将您的工作分解成多个部分，并使用setTimeout"按顺序调用它们，以允许 GUI 在处理期间(在您的调用之间)更新，但即便如此，浏览器似乎仍然有些无响应.

JavaScript is single threaded. You'll have to break your work up into pieces and call them in sequence using "setTimeout" to allow the GUI to update during processing (in between your calls) but even then the browser will still seem somewhat unresponsive.

这篇关于如何在 Javascript 中进行线程处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！