jQuery $ ("# id") .html()의 결과가 문서 준비 함수 중에 표시되지 않습니까?

Question

나는 showLoadProgress()라는 빠른 자바 스크립트 진행 함수를 만들고있다. 함수가 완료 될 때까지 예제 코드에 표시된 buildMyPage() 함수 내에서 반복적으로 호출됩니다.

디버거를 실행할 때 중단 점이 발생하면 "#loadingMessage"요소의 내용이 예상대로 업데이트되고 있음을 알 수 있습니다.

그러나 디버거가 실행되고 있지 않을 때 "#loadingMessage"요소의 내용이 변경된 것을 볼 수 없습니다. 내용은 정적으로 유지됩니다.

어떻게 해결할 수 있습니까?

모든 정보에 대해 미리 감사드립니다.

function showLoadProgress(currentActionDuringLoad, totalActionsForLoad) 
{ 
    var percent = Math.round((currentActionDuringLoad/totalActionsForLoad) * 100); 
    var percentString = percent + "%"; 
    $("#loadingMessage").html(percentString); 
} 

$(document).ready(function() 
{ 
    buildMyPage(); 
}); 

Answer 1

내가 알고있는 바로는 브라우저가 따라 가지 못할 수도있는 빠른 속도에 대해 DOM $("#loadingMessage").html()을 업데이트하려고합니다. 페이지가 변경되거나 크기가 조정될 때마다 브라우저가 수행하는 리플 로우라는 것이 있습니다. 변경 사항을 렌더링하여 말하십시오.

함수가 완료 될 때마다 리플 로우를 생성하려면 주석에 명시된대로 $.Deferred 객체 또는 웹 작업자로이 함수를 래핑하거나 고유 한 사용자 정의 콜백을 만들어야합니다. 작업이 완료되면이 함수는 콜백을 생성하여 사용자가 작업을 선택하여 진행 상황을 표시합니다.

$ .Deferred 개체의 멋진 래퍼는 jQuery .animate() 또는 $.ajax()에서 찾을 수 있습니다. 각 단계에서 loadingProgress를 확인하는 방법을 모르겠으므로 .animate()과 .progressbar() 위젯 및 맞춤 콜백을 결합하여 나중에 수정할 수 있습니다.

jQuery의 $ .Deferred 래퍼 (예 : 페이지로드 용). document.ready 및 window.load는 완벽합니다. 이 시간대에 진행 막대를로드하고 .animate()으로 리플 로우를 생성 할 수 있습니다. 여기에 기초를 보여줄 것이며 jsfiddle을 만들어 실제 상황을 볼 것입니다. 예를 들어 ajax를 사용하여 외부 스크립트를로드하는 URL로 채워진 배열을 생각해 볼 수 있습니다. 다음 실행 한마디로

:

진행 막대가 .animate()으로 진행되면서 당신의 양을 통해 작업을 intialized있다

// once the dom is ready 
$(function() { 
    bar = $(".progressbar"); 
    buildMyProgressbar.init(); 
    buildMyPage.init(); 
}); 

// once the page is loaded 
$(window).load(function() { 
    buildMyProgressbar.stop(); 
}); 

. pageload을 전달할 것입니다.이 값은 하나의 진행 단계의 숫자 ID이거나 "작업"과 "작업"의 양입니다.

animation: function (pageload) { 
    $({ 
     job: pageload.fakeJob // starts at 1 
    }).animate({ 
     job: pageload.fakeJobs // end at jobs.length 
    }, { 
     duration: 1000, 
     step: function() { 
      var percent = Math.round((this.job/pageload.fakeJobs) * 100), 
       percentString = percent + "%"; 

      // verify your job is loaded 
      if (buildMyPage.isJobLoaded(this.job)){ 
       bar.children().eq(0).css({ width: percent + "%" }).text("loading: " + percent); 
      } 
     }, 
     complete: function(){ 
      bar.children().eq(0).text("complete"); 
     } 
    }); 
} 

jQuery를 UI의 ProgressBar : http://jqueryui.com/progressbar/

DEMO :http://jsfiddle.net/tive/b2Utn/

Answer 2

간단한 루프 대신 setTimeout()을 사용하면 브라우저에서보기를 업데이트 할 수 있습니다. 그것을 실행하는 시간이 오래 걸릴 것인지

while (...) { 
    // do something 
} 

가입일

또한

var doSomething = function() { 
    // do something 
    setTimeout(doSomething, 10); 
}; 
doSomething(); 

에 WebWorkers 사용할 수있다.