使用網絡工作者執行異步任務JavaScript

Question

我想在執行任務時顯示加載圖標，然後在圖標執行後隱藏圖標。我需要使用Web工作人員來顯示加載圖標。據稱This forum post的管理員使用網絡工作者。

這是網絡工作者來執行代碼：

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。

Answer 1

正如我們在評論中討論的那樣，您所需要做的就是讓瀏覽器有機會進行重繪。你可以做到與setTimeout()這樣的：

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

你不能這樣做，因爲setTimeout(getTheClients(xml), 1);調用getClients()馬上，然後通過從到setTimeout()返回結果。相反，如上所示，您只需傳遞一個函數參考setTimeout()。