비동기 자바 스크립트 준비 함수

Question

내 응용 프로그램의 속도를 높이려면 DOM 준비가되기 전에 데이터를 준비한 다음 DOM 준비가되면이 데이터를 사용하고 싶습니다. 여기

은 수 있습니다 방법은 다음과 같습니다

var data = function prepareData(){ 
    ... 
}(); 

$(document).ready(function() { 

    // use data to build page 

} 

어떻게 나중에 사용하기 위해 데이터를 준비하기 위해? 감사

Answer 1

당신 명확성을 위해 함수 표현의 주위에 괄호를 사용한다 (때문에 당신이 정의하고 함수를 호출하지만 반환 값을 사용하지 않는 비슷한 상황에서, 그것은 구문 오류가 될 필요그들없이). 또한 함수 표현식을 사용할 때 이름을 지정하지 않으려합니다. 그래서 :

var data = (function(){ 
    ... 
})(); 

또는 함수 대신 선언 사용?

var data = processData(); 
function processData() { 
    ... 
} 

(이유 때문에 다양한 구현 버그의 함수 표현식으로 이름을 사용하지, 특히 인터넷 익스플로러 이전에 IE9를, 어떤 will create two 완전히 관련없는 기능.)

그러나, 당신이 달성하려는 것을 분명하지 않습니다. 브라우저가 script 요소에 도달하면 JavaScript 인터프리터로 전달되어 DOM 빌드를 계속하기 전에 스크립트 인터프리터가 완료 될 때까지 대기합니다 (스크립트가 document.write을 사용하여 HTML 토큰 스트림에 추가 할 수 있기 때문에). 당신은 ...

---

업데이트 그들을 지원하는 브라우저에 당신이 document.write을 사용하지 않을중인 브라우저를 약속하는 async or defer attributes를 사용할 수 있지만 : 당신이 말한 아래 :

prepareData는 오랜 시간 함수이기 때문에 브라우저가 DOM 트리를 작성하는 동안이 브라우저를 실행할 수 있다고 가정했습니다. 불행히도 prepareData가 끝나기 전에 '$ (document) .ready'가 발생합니다. 문제는 processData 비동기 아약스 (또는 부부를 사용하는 경우 processData가되어 실행되는 동안 ready 핸들러가 가능한 트리거 할 수있는 준비가 데이터

유일한 방법 기다릴 '.ready $ (문서)'가르치는 방법입니다 가장자리 조건은 alert, confirm 등이지만, 그렇게하지 않는 것으로 가정합니다. 그리고 만약 그렇다면 함수에서 반환 값으로 결과를 반환 할 수 없습니다 (Ajax 콜백의 결과로 계속 업데이트 한 객체를 반환 할 수는 있지만). 그렇지 않으면 브라우저에서 JavaScript가 단일 스레드이므로 ready 처리기가 인터프리터가 이전 작업 (processData)을 마칠 때까지 대기열에 대기하게됩니다. 비동기 아무것도하지 않는 processData 경우

, 나는 증상이 당신이 ready 핸들러가processData 동안 을 발사 생각하고 다른 원인을했다보고있는 것이 무엇이든 생각한다.

그러나 비동기 물건, 세 가지 옵션의 경우

: 당신은 당신이 보유 할 준비 처리기 통제하지 않은 경우

1. , 당신은 jQuery의 holdReady 기능을 볼 수 있습니다. $.holdReady(true);으로 전화하여 이벤트를 보류하고 $.holdReady(false);을 사용하여 이벤트를 중지합니다.

2. ready 처리기를 다시 예약하기 만하면됩니다. 여기에 내가 (그래서 이런 일이 전역이 아닌 내가 범위 지정 기능에 모든 것을 포장 한주의)을 할 거라고 방법 : 내가 아는 때문에 나는 행복의 onPageReady 기능에 data를 사용

   (function() { 
       var data = processData(); 
   
       $(onPageReady); 
   
       function processData() { 
       } 
   
       function onPageReady() { 
        if (!data.ready) { 
         // Wait for it to be ready 
         setTimeout(onPageReady, 0); // 0 = As soon as possible, you may want a 
                // longer delay depending on what `processData` 
                // is waiting for 
         return; 
        } 
       } 
   
   })(); 
   

   주 거기에 있습니다. 이 함수는 processData이 반환 될 때까지 실행되지 않습니다. 하지만 나는 processData이 천천히 ajax 호출을 통해 채워지는 객체를 반환하고 있다고 가정하고 있으므로 모든 데이터가 준비되면 객체에 ready 플래그를 사용했습니다.

3. 을 변경할 수있는 경우 더 좋은 해결책이 있습니다. 완료되면 processData이 준비 처리기를 트리거 했습니까? 여기 processData이 그것을 할 필요가 무엇을 함께 할 때의 코드입니다 :

   $(onPageReady); 
   

   작동하기 때문에 DOM이 준비되지 않은 경우 아직 그 바로 예약 전화를. DOM이 이 이미 인 경우 jQuery는 즉시 함수를 호출합니다. 이렇게하면 이상한 반복을 방지 할 수 있습니다.