使用Web Worker JavaScript執行異步任務

Question

我想在執行任務時顯示加載圖標，然后在執行后隱藏該圖標。 我需要使用網絡工作者來顯示加載圖標。 該論壇帖子的管理員說使用網絡工作者。

這是要在Web Worker中執行的代碼：

function getTheClients(xml) {
    console.log(xml);
                var client = xml.getElementsByTagName("WebClientList");
                if(client.length === 0) {
                    $("#noClients" + platform).empty();
                    $("#noClients" + platform).append('<p style="margin-top:40px;margin-bottom:20px;text-align:center;">No clients at ' +
                        getSelectedDropDownOptionName("allVillagesDropDown") + ', ' + 
                        getSelectedDropDownOptionName("allLocationsDropDown") + '.</p>');
                    $("#noClients" + platform).attr("style", "display: block");
                    $("#theClientsList" + platform).attr("style", "display: none");
                } else {
                     $("#noClients" + platform).attr("style", "display: none");
                    $("#theClientsList" + platform).attr("style", "display: block");
                }
                for (i=0; i < client.length; i++) {
                    var firstName = client[i].getElementsByTagName("givenName")[0].childNodes[0];
                    var lastName = client[i].getElementsByTagName("familyName")[0].childNodes[0];
                    var oid = client[i].getElementsByTagName("oid")[0].childNodes[0];
                    var nhi = client[i].getElementsByTagName("nhi")[0].childNodes[0];
                    var dwelling = client[i].getElementsByTagName("dwelling")[0].childNodes[0];
                    var photo = client[i].getElementsByTagName("photo")[0].childNodes[0];


                    if (!photo) {
                        photo = "";
                    } else {
                        photo = photo.nodeValue;
                    }
                    firstName = firstName ? firstName.nodeValue : "";
                    lastName = lastName ? lastName.nodeValue : "";
                    oid = oid ? oid.nodeValue : "";
                    nhi = nhi ? nhi.nodeValue : "";
                    dwelling = dwelling ? dwelling.nodeValue : "";
                    var letterDwelling = dwelling ? dwelling[0].toUpperCase() : "";
                    var letterLastName = lastName ? lastName[0].toUpperCase() : "";
                    console.log(photo);
                    dataSource.add({photo: photo, firstName: firstName,lastName: lastName,oid: oid,nhi: nhi,dwelling: dwelling, letterDwelling: letterDwelling, letterLastName: letterLastName});
                }
                if (clientListViewHasNotLoaded) {
                    searchFilter = "lastName";
                    listGroup = "letterLastName"
                    console.log("e");
                    $("#theClientsList" + platform).append('<ul id="flat-listview' + platform + '" class="listView' + platform + '" style="width: 100%; margin-bottom:10px; margin-top:10px;"></ul>');

                    initListView({
                                     field: "lastName",
                                     operator: "startswith",
                                     placeholder: "Search by last name"
                                 }
                        );

                    $("#flat-listview" + platform).data("kendoMobileListView").setDataSource(dataSource);
                    clientListViewHasNotLoaded = false;
                }
}

在執行下一步並合並上述功能之前，這是我用來創建Web Worker的代碼：

腳本（webServiceScript.js）：

self.onmessage = function(event) {
    var results = event.data;
    // do something
    // Done:
    postMessage(results);
};

調用代碼：

var worker = new Worker('scripts/webServiceScript.js');
worker.onmessage = function(event) {
    // Do something with event.data, then hide the spinner.
    app.showLoading();
};
app.hideLoading();
worker.postMessage({args: ' foo bar '});

我想將問題頂部的功能合並到腳本文件中（將在Web Worker中使用）。 當我將上述函數合並到腳本中時，我需要傳遞名為xml的變量。

非常感謝您的任何幫助，我正在努力閱讀此處的文檔。

Answer 1

正如我們在評論中所討論的那樣，您所需要做的就是讓瀏覽器有機會進行重新繪制。 您可以像這樣使用setTimeout()完成此操作：

app.showLoading()
setTimeout(function() {
    getTheClients(xml);
    app.hideLoading();
}, 1);

您不能執行setTimeout(getTheClients(xml), 1); 因為這會立即調用getClients() ，然后將返回結果傳遞給setTimeout() 。 相反，您僅需將函數引用傳遞給setTimeout()如上所示。