으아악

원본 포스터에서 가져온 내용입니다. 클릭하여 팝업 프레임을 표시할 때 3초의 설정 시간 초과 간격을 추가하면 팝업 프레임이 자동으로 숨겨지거나 팝업 프레임의 해당 구조가 제거됩니다.

차단 메커니즘이란 무엇인가요?
Js 차단 메커니즘은 Js 엔진의 단일 스레드 처리 방식과 관련이 있습니다. 각 창에는 하나의 JS 스레드가 있습니다. 소위 단일 스레드란 특정 시간에 특정 코드만 실행될 수 있고 다른 코드는 차단된다는 의미입니다.
브라우저는 이벤트 기반이므로 브라우저의 많은 동작은 비동기식(비동기화)이며 이벤트가 동시에 또는 지속적으로 트리거되기 쉽습니다. 비동기 이벤트가 발생하면 해당 이벤트가 생성되어 실행 큐에 배치되고, 현재 코드 실행이 완료된 후 해당 코드가 실행됩니다. 마우스 클릭 이벤트, 타이머 트리거 이벤트, XMLHttpRequest 완료 콜백 등이 발생합니다. 모두 실행 대기 중입니다.
Js의 차단 메커니즘과 관련하여 다음 코드를 보면 일반적으로 이 코드는 0,1,2

for(var i=0;i 으아악

}
사실 이 코드의 로그 결과는 3,3,3입니다. 이는 JS 초보자가 쉽게 직면할 수 있는 문제입니다. 구체적인 이유는 for 루프의 차단 메커니즘 때문입니다. 위 코드에서 setTimeout 타이머는 for 루프 실행이 완료될 때까지 기다려야 합니다. for 루프 실행이 완료된 후 i는 이미 3이고 이때 setTimeout이 실행되기 시작하므로 console.log(i)는 3이 되세요.
i가 3인 이유는 for 루프의 실행 순서를 검토해 보세요. i가 2일 때 루프 조건이 충족되고 코드 블록이 실행됩니다. 이때 i는 3입니다. 루프 조건은 다음과 같습니다. 충족되지 않고 코드 블록이 실행되지 않으면 사이클이 중지됩니다.
for 루프의 경우, 조건이 충족되지 않으면 루프가 중지된다는 점을 기억하세요. 위 코드의 경우 i=3일 때 만족하지 않는 것을 볼 수 있습니다.
이벤트 차단 해결 방법
사실 차단은 js 엔진의 처리 방법이므로 '차단' 해결을 생각하지 않고 실행하려는 코드를 '메인 스레드'에 삽입하는 것이 가장 좋습니다. 이런 식으로는 이해하기 어려우니 위의 코드를 예로 들어 바로 코드로 넘어가겠습니다

for(var i=0;i 으아악

위 코드에서는 즉시 실행되는 익명 함수를 추가하고 for 루프의 i를 실제 매개변수로 전달했습니다. 이런 식으로 setTimeout은 기다리지 않고 즉시 실행됩니다. (편집자는 여기서 자세한 내용을 모르므로 자세한 내용을 다루지 않겠습니다. 아마도 새 임시 스레드가 열리고 익명 함수가 즉시 실행되고, 그런 다음 즉시 다시 전환했습니다).

타이머를 사용해 보는 건 어떨까요