JS 코드 실행 순서의 논리는 무엇입니까? 버튼을 클릭하면 배경이 빨간색이되고 나서 메시지가 나타나기를 기대합니다. 그러나 OK ->CodePen을 클릭하면 메시지가 먼저 나타나고 배경에 색상이 적용됩니다. 올바른 것이 무엇이겠습니까? & 확인을 클릭하기 전에 배경을 빨간색으로 만드는 올바른 방법은 무엇입니까?JS - 왜 이러한 코드 실행 순서가 필요합니까? (초급)
function run(){
document.body.style.backgroundColor = 'red';
alert('Contratulations!');
}<html>
<head></head>
<body>
<button onclick="run()">Click me!</button>
</body>
</html>코드는 예상 한 순서대로 실행되지만 웹 브라우저에서 제공하는 funcitonality를 호출하므로 동기식이 아닙니다.
UI 스레드에서 브라우저 실행 Javascript가 발생하지 않습니다. 따라서 DOM (자바 스크립트가 브라우저 HTML과 상호 작용할 수 있도록하는 추상화)을 변경하면 대신 자바 스크립트 실행과 별도로 UI (브라우저 페이지)가 업데이트됩니다. 기본 DOM 요소가 업데이트되지만 실제 UI에 대한 즉석 업데이트는 없습니다.
코드에서 DOM 요소를 변경하면 코드가 즉시 브라우저에 경고를 표시하도록 트리거합니다. 알림 표시는 브라우저별로 이루어지며 Chrome의 경우 UI 업데이트가 일시 중지되므로 계속하기 전에 알림과 상호 작용해야합니다. Firefox에서는 UI가 업데이트 된 후 경고가 표시됩니다.
두 브라우저 간의 동작은 브라우저 렌더링 엔진과 이벤트 루프가 구현되는 방식의 차이 일뿐입니다.
function run(){
document.body.style.backgroundColor = 'red';
setTimeout(function() {
alert('Contratulations!');
},0);
}<html>
<head></head>
<body>
<button onclick="run()">Click me!</button>
</body>
</html>이 답변 당신은 자바 스크립트 이벤트 루프의 끝 alert 디스플레이를 추가 setTimeout를 호출하여 문제를 해결할 수있는 방법에 대한 좀 더 자세한 내용 Why is setTimeout(fn, 0) sometimes useful?
있다 UI가 업데이트 할 수있는 충분한 시간을 제공합니다.
이보십시오.
setTimeout
function run(){
document.body.style.backgroundColor = 'red';
setTimeout(function() {
alert('Contratulations!');
}, 0);
}<html>
<head></head>
<body>
<button onclick="run()">Click me!</button>
</body>
</html>아직도 OP의 코드에서 경고 상자를 닫은 후에 만 배경이 변경되는 이유는 설명하지 못합니다. –
이 호출은 alert() 호출이 모달 대화 상자에 대한 호출이기 때문에 발생합니다. 모달 대화 상자는 대화 상자가 닫힐 때까지 UI가 다른 작업을 수행하지 못하도록 차단하는 대화 상자입니다. 이것은 자바 스크립트 런타임이 다음 문장으로 넘어 가기 전에 브라우저가 색을 빨리 표현하지 못하는 문제입니다. alert()이 실제로 window 개체의 메서드임을 인식하는 것이 중요합니다. 서면으로 window.alert() 수 있습니다. 이 사실을 알게되면 window 개체가 JavaScript 언어의 기본 부분이 아니라는 것을 이해해야합니다. window은 브라우저 개체이므로 JavaScript 런타임이 아니라 브라우저에서 관리합니다.
알림이 아닌 콘솔에 메시지를 표시하도록 코드를 수정했습니다. 콘솔에 쓰는 것은 UI를 블로킹하지 않기 때문에 색상 변경이 즉시 발생합니다.
function run(){
document.body.style.backgroundColor = 'red';
console.log('Contratulations!');
}<html>
<head></head>
<body>
<button onclick="run()">Click me!</button>
</body>
</html>
당신이 사용하는 어떤 브라우저? Firefox에서 예상대로 작동합니다. – mseifert
@mseifert, Chrome 54을 사용하고 있습니다. – oboer