我想在執行任務時顯示加載圖標,然後在圖標執行後隱藏圖標。我需要使用Web工作人員來顯示加載圖標。據稱This forum post的管理員使用網絡工作者。使用網絡工作者執行異步任務JavaScript
這是網絡工作者來執行代碼:
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 '});
我想將問題頂部的函數合併到腳本文件中(用於網絡工作者)。當我將上面的函數併入腳本時,我需要傳遞我的變量xml。
任何幫助非常感謝,我很努力去理解文檔here。
你的問題到底是什麼? – jfriend00 2014-12-07 20:20:52
@ jfriend00如何使用網絡工作者異步執行基本任務。然後將基本任務替換爲問題頂部的函數,將一個變量傳遞給異步任務(xml)。它是異步的原因是因爲這是讓我的加載圖標顯示的唯一方法。 – btf 2014-12-07 20:23:39
如果你想要顯示一個加載圖標,只需顯示加載圖標,然後使用'setTimeout(func,1);'來運行你的函數就容易多了。無需網絡工作者。你只需要讓瀏覽器重畫一遍,'setTimeout()'就可以做到。 – jfriend00 2014-12-07 20:24:54