웹 작업자와 비동기 작업 수행 JavaScript

Question

작업을 수행하는 동안로드 아이콘을 표시하고 수행 한 후에 아이콘을 숨기려고합니다. 로드 아이콘을 표시하려면 웹 작업자를 사용해야합니다. 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()와 그것을 수행 할 수 있습니다 그것은 바로 getClients()를 호출하고 setTimeout()에 그의 리턴 결과를 전달하기 때문에 당신은 setTimeout(getTheClients(xml), 1); 할 수 없습니다

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

. 대신 위에 표시된 것처럼 setTimeout()에 대한 함수 참조 만 전달해야합니다.