자바 스크립트 : 다른 순서

의 기능 화재 이해가되지 않는 이유 기능 alert() 불이 코드에 indicator 스타일을 설정하기 전에 :자바 스크립트 : 다른 순서

자바 스크립트 :

var MyClass = function() 
{ 
    th  = this; 
    th.func = function(){alert('yes');}; 
    th.Click = function(){ 
    document.getElementById('indicator').style.color = "#0f0"; 
    document.getElementById('indicator').innerHTML = "YES"; 
    th.func();  // here it fires before above style changing 
    }; 
    th.Start = function() 
    { 
    var a = document.getElementById('button1'); 
    a.addEventListener('click', th.Click, false); 
    }; 
    th.Init = function() 
    { 
    th.Start(); 
    }; 
} 
var a = new MyClass().Init();

HTML :

<button id='button1'>Click Me</button> 
<div id='indicator' style='color:#f00'>NO</div>

다음에 을 발사하고 싶습니다.

출처

2017-04-13 Max Maximilian

. 알림()은 현재 페이지에서 브라우저의 모든 작업을 중지합니다. 따라서 콘텐츠의 다시 그리기도 차단됩니다. 'window.setTimeout (th.func, 0);' – devnull69

@ devnull69와 같은 비 차단 호출을 사용하여 검사 할 수 있으므로 다른 함수 (예 :'alert() 대신'GET()'요청))', 그것은 정상적인 순서대로 행동 할 것인가? –

네, 맞습니다. 비동기 메소드에만 해당됩니다. 모든 동기식의 경우, 나중에 (유휴 모드에서)'setTimeout'을 사용하지 않으면 변경 사항을 볼 수 있습니다. – devnull69

자바 스크립트의 단일 스레드 자연입니다. 경고/모달 창은 실제로 다른 모든 항목이 실행을 중지 할 때까지 중지합니다.

색상 변경이 포함됩니다. Javascript는 실제로 브라우저가 색상을 바꾸고 이동하는 것을 말합니다. 그러나 경고를 받으면 색상이나 변경되는 프로세스가 일시 중지되고 모달 창 일명 경고가 해제 될 때까지 다시 시작하지 않습니다. 해결 방법은 다음과 같이 뭔가를 할 수 있습니다 : 그것은 후 화재,하지만 당신이 경험하는 '스레드 차단 "입니다 codepen

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title></title> 
    </head> 
    <body> 
     <button id='button1'>Click Me</button> 
     <div id='indicator' style='color:#f00'>NO</div> 
     <script type="text/javascript"> 
     var MyClass = function() { 
     th    = this; 
     th.func = function() { window.alert('yes'); }; 
     th.Click = function() { 
      document.getElementById('indicator').style.color = "#0f0"; 
      document.getElementById('indicator').innerHTML = "YES"; 
      // The setTimeout fix 
      // ==== 
      setTimeout(th.func, 100); 
     }; 
     th.Start = function() 
     { 
      var a = document.getElementById('button1'); 
      a.addEventListener('click', th.Click, false); 
     }; 
     th.Init = function() 
     { 
      th.Start(); 
     }; 
     } 
     var a = new MyClass().Init(); 
     </script> 
    </body> 
</html>

출처

2017-04-13 12:09:35

오케이 괜찮아. 마지막 질문 : 예를 들어, 나는 느린 기계 (또는 매우로드) veeery 있고 우리는 스타일을 변경뿐만 아니라,하지만 시간 초과 전에 큰 기능을 가지고 내가 '1'로 시간 제한을 설정,이 조건에서 너무 후에 화재 것인가? –

setTimeout 코드는 항상 다음 프로세서 사이클 (틱)에서 실행됩니다. 예제를 보자 :'setTimeout (() => {alert ("Hi");}, 0); alert ("Hello!");'0을 기다려야하기 때문에 실제로는 "Hi"경고가 먼저 작동해야하지만 "Hello!" 작품 첫 번째 –

그래, 내가 루프를 한 그것은 잘 작동, 도와 주셔서 감사합니다! ;)) –

자바 스크립트 : 다른 순서

답변

관련 문제