JavaScript에서 긴 작업 모니터링

StackOverflow https://stackoverflow.com/questions/1130901

문제

JavaScript 루틴으로 초기화되어야하는 많은 위젯을 사용하는 특정 페이지가 있습니다 (약 400, 복잡한 것). 시간이 조금 걸립니다 (느린 기계에서는 20 초). 이제 페이지 대신 진행 상황 표시기 (백분율 레이블이있는 간단한 텍스트 필드)를 표시 할 수 있다고 생각했지만 계속 업데이트하더라도 진행중인 작업이 모든 것을 차단하고 업데이트가 없습니다. 따라서 무거운 JavaScript 작업이 완료 될 때까지 모든 것이 얼어 붙었습니다. 나는 심지어 다음 실험을했지만 얼어 붙는다 (그리고 Firefox는 스크립트가 완료하는 데 너무 오래 걸리고 있다고 말합니다 ...) :

function a(){
    for (var i = 0; i < 5000000000000000; i++){
        abb = i;        
    }
}

var abb;

function c(){
    var ef = document.getElementById("pip");
    ef.innerHTML = abb;

}

function b(){

    setInterval(c, 50);
    setTimeout(a, 1000);
}

나에게 오는 유일한 해결책은 긴 직업을 조각으로 분류하고 레이블을 업데이트하는 것입니다 .... 그러나 다른 해결책이 있는지 궁금했습니다! God, JS는 가능한 빨리 실이 필요합니다 ... :)

어떤 아이디어?

도움이 되었습니까?

해결책

스크립트가 Onload 이벤트에서 실행 중이라고 가정 할 수 있으므로 사용자가 실행하는 동안 빈 페이지에 앉아 있지 않도록 할 수 있습니까?

그렇다면 스크립트를 별도의 함수로 나누고 해당 함수의 배열을 만들고 해당 배열을 반복하고 함수를 평가하고 모든 N 함수 후에 진행 상황 표시기를 업데이트하는 것이 좋습니다.

또한 공개 웹 사이트라면 페이지를 경험하는 데 절대적으로 필요한 JavaScript의 양을 최소화하십시오. 각 위젯이 필요로하는 초기화 금액. 스미스 요원을 역설하기 위해 : 아무도 그들을보고 기다리지 않으면 아코디언 폴드 나무는 무엇입니까?

다른 팁

스레드를 원한다면 LiveConnect를 사용하고 실제 Java 스레드를 만들 수 있습니다 (보안 관리자가 허용하는 경우).

그렇지 않은 경우 C의 코 루틴 디자인 패턴을 사용할 수 있습니다.

문안 인사.

이것은 작동합니다. B에 전화를 걸어 ID = "PIP"가있는 div를 가지고 있다고 가정합니다.

<html>
<head>
    <script type="text/javascript">

    var i;
    var state = 0;

    function a(){

        switch(state){

        case 0:
            i = 0;
        case 1:
            i++;
            for (; i < 5000000000000000; i++){
                abb = i;
                if (i%1000 == 0){
                    setTimeout(a, 1);
                    state = 1;              
                    return;             
                }                   
            }
        break;
        }
    }

    var abb;

    function c(){
        var ef = document.getElementById("pip");
        ef.innerHTML = abb;

    }

    function b(){

        setInterval(c, 50);
        setTimeout(a, 1000);
    }

    </script>
</head>
<body onload="javascript:b();">
    <div id = "pip">test</div>
</body>
</html>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top