Question

我想在执行任务时显示加载图标，然后在执行完后隐藏图标。我需要使用Web worker来显示加载图标。 This forum post的管理员说要使用网络工作者。

这是在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;
                }
}

这是我用来创建网络工作者的代码，在我采取下一步并合并上述功能之前：

脚本（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的变量。

任何帮助都非常感谢，我很难理解文档here。

Answer 1

正如我们在评论中讨论的那样，您需要做的就是让浏览器有机会进行重新绘制。您可以使用setTimeout()完成此操作：

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

您无法setTimeout(getTheClients(xml), 1);，因为它会立即调用getClients()，然后将返回结果传递给setTimeout()。相反，您必须将函数引用传递给setTimeout()，如上所示。

使用Web worker JavaScript执行异步任务

1 个答案: