스크립트가 실행되는 동안 JavaScript 페이지 업데이트

로드 중 일부로 많은 계산을 수행하는 웹 페이지가 있습니다.스크립트가 실행되는 동안 JavaScript 페이지 업데이트

최종 사용자가 지연을 예상 할 수 있도록 페이지가 "사고 중"인 동안 회 전자 막대를 표시하려고합니다.

내가 할 일은 회전하는 바퀴가 될 GIF 파일을 표시하고 출력물이 될 테이블을 숨기는 것입니다.

일단 기능이 시작되면 기능 업데이트가 완료 될 때까지 페이지 업데이트가 중단 된 것 같습니다. 따라서 최종 사용자는 "진행 중"섹션을 볼 수 없습니다.

나는 내 문제를 보여주기 위해 함께 넣어 샘플 코드는 다음과 같습니다

<!DOCTYPE html> 
<html> 
<body> 

<script> 
function show(id, value) { 
    document.getElementById(id).style.display = value ? 'block' : 'none'; 
} 
function Processing(x) 
{ 
    if (x === true) 
    { 
     show('page', false); 
     show('loading', true); 
    } 
    else 
    { 
     show('page', true); 
     show('loading', false); 
    } 
} 

function MainProcess() 
{ 
    Processing(true) // Set to "Show processing..." 

    var start = new Date().getTime(); // Sleep a few seconds 
    for (var i = 0; i < 5; i++) { 
     if ((new Date().getTime() - start) < 3000) { i = 1 } 
    } 
    Processing(false) // Set to "Show Completed processing..." 
} 

window.onload = function() { 
    show('page', false); 
    show('loading', false); 
}; 
</script> 

<div id="loading"> 
    <h1>Processing your request.</h1> 
</div> 

<div id="page"> 
    <DIV class="body"> 
     <h3>Done Processing your request.</h3> 
    </DIV> 
</div> 
<div id="buttons"> 
    <button onclick="MainProcess();">Start Timer</button> 
    <button onclick="Processing(false);">Set to Completed</button> 
    <button onclick="Processing(true);">Set to Processing</button> 
</body> 
</html>

내가 이것을 실행

, 그것은 세 개의 버튼을 제공합니다.

"Start Timer"를 누르면 몇 초 동안 처리 된 다음 완료 표시가 나타납니다. 대신 단추가 색상을 변경하고 타이머가 완료 될 때까지 아무 작업도 수행하지 않으며 완료를 표시합니다.

(I 자바 스크립트에 새로운 오전하지만 몇 가지 다른 언어 인치 노련한 프로 내가 Visual Basic 또는 PowerShell에서 같이 할 수 호출의 "DoEvents"유형이 있습니까?)

출처

2017-04-26 Jean-Claude DeMars

처리 기능이 시작되기 전에 DOM 업데이트 (즉, DIV의 표시 속성 변경)가 완료되지 않은 것 같습니다.

function MainProcess() 
 
{ 
 
    Processing(true); // Set to "Show processing..." 
 

 
    // Pause for 100 ms before starting time-consuming code to allow dom update to c 
 
    var domUpdateDelay = 100; 
 
    window.setTimeout(function() { 
 

 
         var start = new Date().getTime(); // Sleep a few seconds 
 
         for (var i = 0; i < 5; i++) { 
 
          if ((new Date().getTime() - start) < 3000) { i = 1 } 
 
         } 
 

 
         Processing(false) // Set to "Show Completed processing..." 
 
         }, 100); 
 
}

window.setTimeout는 두 개의 인수를 취합니다 : 첫 번째 인수가 하나 옵션은 DOM 업데이트를 완료 할 수 있도록하기 위해 처리 기능의 시작을 지연 window.setTimeout을 사용하는 것입니다 함수는 x 밀리 초 후에 실행됩니다. 여기서 x는 두 번째 인수입니다.

이 접근법의 문제점은 setTimeout에 대한 적절한 지연이 machines/users/browsers/runs에 따라 달라진다는 점입니다. 그러나, 아마도 이것이 99 %의 경우에 문제가되지는 않을 것이라고 생각합니다.

출처

2017-04-26 21:09:22 cjg

그래서 앱이 작동 중임을 사용자에게 알리기 위해 앱의 전반적인 성능에 지연을 추가해야합니다. LOL - 감사합니다. 작동합니다. –

난 당신을 활용할 수있을 것 같아요 에서는 setTimeout 같은 함수 (https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout는) 말 :

setTimeout(function() { 
    Processing(false); 
}, 5000);

난 당신이 거의 그 루프 브라우저를 충돌하고 있습니다 무슨 일이 일어나고 있는지 생각합니다. 나는 당신의 질문 중 어떤 부분이 데모 용으로 거기에 있었는지 오해했을 수도 있습니다.

출처

2017-04-26 21:00:46 piisexactly3

루프는 코드 스 니핏을 만드는 간단한 방법이었습니다. 이 솔루션의 문제점은 값 업데이트가 지연되지만 일단 값이 업데이트되면 브라우저에 화면을 업데이트 할주기가 없음을 의미합니다. 주 프로세스를 지연 시키면 "작업 중"코드 부분이 실행되고 지연을 통해 화면이 업데이트됩니다 (GUI 프로그래밍 일로부터 가난한 사람의 DoEvents). –

스크립트가 실행되는 동안 JavaScript 페이지 업데이트

답변

관련 문제