JavaScript 호출 스택 및 setTimeout 사용_javascript 기술에 대한 심층 분석

setTimeout(function(){alert("Hello World");},1000)

function a (){
setTimeout(function() {alert(1)}, 0);
alert(2)
}
a(); 이 코드에 주목하세요. setTimeout 딜레이가 0으로 설정되어 있는데, 이는 딜레이가 0밀리초라는 뜻입니다. 즉, 1,2라는 딜레이 없이 즉시 실행되는 것 같습니다. 그러나 실제 실행 결과는 실제로 2,1입니다. 왜? 이는 Javascript 호출 스택 및 setTimeout 기능으로 시작됩니다.

우선 JavaScript는 단일 스레드, 즉 동시에 하나의 코드만 실행되므로 각 JavaScript 코드 실행 블록은 다른 비동기 이벤트의 실행을 "차단"합니다. 둘째, 다른 프로그래밍 언어와 마찬가지로 Javascript의 함수 호출도 스택을 통해 구현됩니다. 함수 a를 실행하면 a가 먼저 스택에 푸시됩니다. setTimeout이 경고(1)에 추가되지 않으면 두 번째로 경고(1)가 스택에 푸시되고 마지막으로 경고(2)가 푸시됩니다. 그러나 이제 setTimeout을 경보(1)에 추가한 후 경보(1)가 대기하고 "가능한 한 빨리" 실행되도록 새 스택에 추가됩니다. 최대한 빨리 한다는 것은 a의 스택이 완료된 직후에 실행한다는 의미이므로 실제 실행 결과는 먼저 경고(2), 그 다음 경고(1)입니다. 여기서 setTimeout은 실제로 현재 함수 호출 스택에서 경고(1)를 제거합니다. 다음 예를 보세요.

이러한 함수의 목적은 문자를 입력할 때마다 현재 입력되는 알림이 나오지만 실제 효과는 알림이 나오고 버튼을 누르기 전의 내용입니다. 여기서는 이를 달성하기 위해 setTimeout(0)을 사용할 수 있습니다.

이렇게 하면 onkeydown 이벤트가 트리거되면 경고가 다음 호출 스택에 배치되고 onkeydown 이벤트에 의해 트리거된 스택이 닫히면 실행이 시작됩니다. 물론 브라우저에는 우리의 요구 사항을 충족할 수 있는 onkeyup 이벤트도 있습니다.

이러한 setTimeout 사용은 실제 프로젝트에서 여전히 자주 발생합니다. 예를 들어, 브라우저는 DOM을 변경하기 전에 함수 스택이 끝날 때까지 현명하게 기다립니다. 이 함수 스택에서 페이지 배경이 먼저 흰색에서 빨간색으로 설정된 다음 다시 흰색으로 설정되면 브라우저는 DOM이 변경되지 않았다고 생각합니다. 두 문장을 무시하면 setTimeout을 통해 다음 스택에 "흰색으로 다시 설정" 기능을 추가할 수 있습니다. 그런 다음 배경색이 변경되었는지 확인할 수 있습니다(매우 빨리 알아차리지 못할 수도 있음).