자바 스크립트 루프에서 html로 작성 "발생했을 때"

Question

나는 자바 스크립트에서 "실시간"으로 div에 쓰는 방법을 알아 내려고하고 있습니다. 코드를 실행하면 두 루프가 실행 된 후에 만 ​​루프의 모든 텍스트가 표시되지만 실제로는 (필자가 작성했다고 생각하는 방식으로) 줄 바꿈해야합니다.

난 그냥 당신이 (CONSOLE.LOG 사용) 무슨 일이 일어나고 있는지 바로 볼 크롬 개발자 도구 콘솔에서 같이 일하고 싶습니다 . JsFiddle Demo

예를 참조하십시오.

나는 그것을 문자열이나 배열에 모두 넣을 수 있고 그것을 루프 밖에서 인쇄 할 수 있다는 것을 알고 있지만 실제로 일어나는 것처럼 그것을 볼 필요가있다.

나는 어딘가에 이미 해결책이 있어야한다고 확신하지만, 단서를 찾을 수 없다 (Google에 맞는 단어를 사용하지 않을 수도 있음). 어떤 정보든지 높게 평가 될 것입니다.

편집 : 콘솔에서 만들어 출력이 while 루프 빨리 것을, 덜 복잡하고 더 나은 비교 JSFiddle Demo 2

Answer 1

문제입니다 수 있도록, 같은 HTML. 출력물은 실시간으로 보지 못합니다. 브라우저는 문서를 업데이트 할 시간이 필요합니다. 콘솔에서 각각을 볼 수있는 이유는 콘솔이 느려지려고하기 때문입니다. 콘솔은 지연된 라인을 출력합니다. 콘솔의 마지막 항목이 표시되면 코드가 이미 오래 전에 끝났습니다. 코드 실행이 콘솔보다 빠릅니다. 시간에 이 아니므로도 마찬가지입니다.

콘솔이 실제로 얼마나 느린지를 쉽게 보여줍니다. this example을보세요. 실행될 때 콘솔에 로그 항목을 만드는 간단한 루프가 있습니다. 그 후 우리는 내용에 loop finished을 인쇄합니다. 문서에서 출력을 볼 때 스크립트가 이미 중지 된 경우에도 콘솔에서 행이 계속 인쇄됩니다.

이제 루프 실행 시간에 브라우저에 시간을 지정하여 데이터를 출력하고 브라우저가 변경 사항을 렌더링하도록 할 수 있습니다. 그러나 거기에서 루프를 사용했기 때문에 비동기로 만들거나 다음에 시작하기 전에 먼저 값을 출력하는 지연을 만들 수 없습니다. 그러나 코드를 자동 실행 기능으로 전환하고 다음 줄을 인쇄하기 전에 브라우저에서 원활한 출력을 위해 약간 시간을 줄입니다.

큰 루프를 만들면 코드를 실제로 처리해야합니다. jQuery가 모든 루프에서 #log div를 다시 검색하도록하는 것은 좋지 않습니다. 루프 전에 한 번 해보십시오. 그리고이 간단한 문자열 연산에 배열을 사용하지 마십시오. 이렇게하면 더 느려집니다.

var log = $("#log"); 
var generateTestCases = 3000; 

(function next(amount) { 
    if(amount) { 
     var repeatIF2 = 10; 
     var trackingString = amount + ";"; 

     (function output(count) { 
      if(count) { 
       trackingString += count + ";"; 
       log.append('<div>' + trackingString + '</div>'); 

       if(--count) { 
        // this line slows down the output 
        // change the time for faster or slower output 
        setTimeout(output, 50, count); 
       } else { 
        next(--amount); 
       } 
      } 
     })(repeatIF2); 
    } 
})(generateTestCases); 

Working example.