진행 표시 줄이 루프

for(index=0; index < 1000; index++){

// set progress bar value to index/1000 * 100 + '%'

}

나는 우리가 setInterval 기능에 넣을 수 있습니다주의에 for 루프에서 진행 표시 줄이 필요하지만, 그것은 것입니다 for 루프를 실행하는 데 더 많은 시간이 소요됩니다.

그래서 for 루프를 실행하고 더 많은 시간을 들이지 않고 진행률 막대를 생성 할 수있는 방법이 있습니까?

출처

2013-07-09 Kimmi

당신은 setinterval에 의해 추가 된 시간이 필요합니다. 루프를 1000 번 실행하면 진행률 막대가 실제로 진행되는 것을 볼 수 없을 정도로 빠릅니다. –

@Bartdude 루프가 반 이상을 가져 가면 어떻게됩니까? 그렇다면 그것은 의미가 있습니다. – Kimmi

So is there any way to run the for loop and generate the progress bar without cost more time?

대부분 아니, 당신이 브라우저로 다시 산출해야한다 ("대부분"왜 아래 참조) (예를 들어, setTimeout 또는 setInterval를 통해) 그래서 페이지 표시를 업데이트 할 수 있습니다, 그리고 실제로 양을 증가 루프가 실행되는 시간. 이제 일반적으로 시간 제한을 0으로 설정하면 브라우저에서 5 ~ 10 밀리 초 후에 다시 전화를 겁니다. 10ms라고 부르세요. 1,000 사이클 루프에서 매 100 사이클 (예 : 10 개의 진행 업데이트)을 얻을 수 있으며 총 시간에 100ms 정도만 추가됩니다.

function loop(array, batchSize, callback) { 
    var index = 0; 

    doWork(); 

    function doWork() { 
     var limit = Math.min(array.length, index + batchSize); 
     while (index < limit) { 
      // Do something with array[index] 
     } 
     if (limit < max) { 
      setTimeout(doWork, 0); 
     } 
     else { 
      callback(); // Done 
     } 
    } 
}

사용 :

loop(someArray, 100, function() { 
    // Done 
});

왜 "대부분"아니오 : some browsers을에 다음과 같습니다

FWIW, (의는 당신이를 통해 반복하고 배열의 가정 해 봅시다) (특히 IE9 이하는 아님), 일부 작업의 경우 web workers을 사용할 수 있습니다. 웹 작업자는 백그라운드에서 실행되는 기본 자바 스크립트 스레드와 별도로 격리 된 자바 스크립트 스레드입니다. 두 스레드는 서로 메시지를 게시하여 통신합니다.

웹 작업자를 해고하고 작업을 수락하고 메시지를 게시하여 진행률 표시 줄을 업데이트 할 수 있습니다. This article은 웹 작업자의 기본 지식을 제공합니다.

홈페이지 문서 및 스크립트 :

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Progress</title> 
<style type="text/css"> 
body, html { 
    height: 100%; 
} 
body { 
    font-family: sans-serif; 
} 
</style> 
</head> 
<body> 
<div id="progress"><em>(Click to start)</em></div> 
<script> 
(function() { 
    var div = document.getElementById("progress"); 
    var counter = new Worker("counter.js"); 

    div.addEventListener("click", run); 

    counter.addEventListener("message", function(event) { 
    div.innerHTML = "Counter so far: " + event.data.counter; 
    }); 

    function run() { 
    div.removeEventListener("click", run); 
    counter.postMessage({ max: 10000000 }); 
    } 
})(); 
</script> 
</body> 
</html>

counter.js 웹 작업자 스크립트 (그들은 항상있어 별도의 파일) :

self.addEventListener("message", function(event) { 
    var max; 
    var counter; 

    max = event.data && event.data.max || 100000; 
    for (counter = 0; counter < max; ++counter) { 
    if (counter % 1000 === 0) { 
     self.postMessage({counter: counter}); 
    } 
    } 
    self.postMessage({counter: counter}); 
});

그것은 가치가 무엇인지에 대한

, 그것은 다음과 같이 보입니다

출처

2013-07-09 15:42:19

그러나 업로드 파일과 같은 몇 가지 예가 있습니다. 필요한 시점에 정확히 진행 막대를 생성합니다. – Kimmi

@Kimmi : 자바 스크립트가 아닌 일반적으로 플래시임을 알 수 있습니다. –

@Kimmi : FWIW, 두 번째 예제를 추가했습니다. 대신 웹 작업자와 함께 이런 일을했습니다. –

진행 표시 줄이 루프

답변

관련 문제