使用web worker JavaScript执行异步任务

我想在执行任务时显示加载图标，然后在执行后隐藏图标。我需要使用一个网页工作者的加载图标显示。网站管理员说他使用了一个网络工作者

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

呼叫代码：

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的变量

---

非常感谢您的帮助，我正在努力理解文档

正如我们在评论中所讨论的，您所需要做的就是给浏览器一个重新绘制的机会。您可以通过如下方式使用

setTimeout（）

完成此操作：

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

---

您不能执行

setTimeout（getTheClients（xml），1）

因为它会立即调用

getClients（）

，然后将返回结果传递给

setTimeout（）

。相反，您只需将函数引用传递给

setTimeout（）

，如上所示。

您的问题是什么？@jfriend00如何使用web worker异步执行基本任务。然后用问题顶部的函数替换基本任务，将一个变量传递给异步任务（xml）。它之所以是异步的，是因为它是让我的加载图标显示的唯一方法。如果你想显示加载图标，只显示加载图标更容易，然后使用

setTimeout（func，1）以运行函数。不需要网络工作者。您只需要让浏览器重新绘制，然后
setTimeout（）
就可以了。@jfriend00哦，好的，谢谢。我使用这个论坛答案作为指导：那么你建议的setTimeout将等待一毫秒并执行我的功能，它是否会异步并使加载图标显示？@jfriend00是类似于
app.showLoading（）的语法；setTimeout（getTheClients（xml），1）
那么在getTheClients（xml）的末尾有
app.hideLoading（）
？因为加载图标没有显示出来。不幸的是，没有显示加载图标。@btf-那么您还有其他问题，这些问题在您公开的代码中并不明显。我建议您在浏览器控制台中查找可能会阻止代码运行的JS错误。此代码使浏览器有机会重新绘制。您显然还有其他问题。控制台中没有错误。您建议的此解决方案可能不适用于Telerik移动应用程序。网站管理员说他使用了一个网络工作者。@btf-我不知道Telerik移动应用程序是什么，这似乎是你第一次提到这是一个网页以外的任何东西。仅仅为了让屏幕重新绘制，根本不需要web工作者（过于复杂）。如果
showLoading（）
需要的不仅仅是简单的重新绘制，那么您的问题需要包含这些信息。现在，我放弃了，因为你的问题根本不清楚。没关系。我只想用一个网络工作者来执行我的功能，这是在这个问题的顶部。我想使用web worker，因为这是根据Telerik管理员进行showLoading显示的方法，但实际上并不需要这些信息来向我展示如何使用web worker。谢谢你的帮助。
app.showLoading()
setTimeout(function() {
    getTheClients(xml);
    app.hideLoading();
}, 1);