지연 시간이 0인 setTimeout_javascript 기술 이해

이전 기사인 JavaScript의 9가지 함정과 의견, 9번 Focus Pocus에서 언급된 문제를 살펴보겠습니다. 이에 대해 원저자는 편향적으로 이해하고 있습니다. 사실 이는 단지 IE의 문제가 아니라 기존 JavaScript 엔진의 스레드 구현에 대한 문제입니다. 독자들이 나에게 조언을 해줄 수 있습니다.) 1과 2를 살펴보겠습니다. 소스 코드를 보면 우리 작업이 매우 간단하다는 것을 알 수 있습니다. 즉, 문서에 입력 텍스트 상자를 추가하고 초점을 맞춘 다음 선택하는 것입니다. 이제 각각을 클릭해 보면 1개는 집중하여 선택할 수 없지만 2개는 선택할 수 있는 것을 볼 수 있습니다. 둘 사이의 차이점은 다음을 실행할 때

input.focus();
input.select()
2에는 지연 시간이 0인 추가 setTimeout 주변 기능이 있다는 것입니다. :

setTimeout(function(){
input.focus();
input.select();
},
Follow JavaScript: 최종 가이드 5th 14.1

실제로 setTimeout은 현재 지연된 이벤트에 대한 이벤트 핸들러 실행을 완료하고 문서의 현재 상태를 업데이트한 후 setTimeout 내에 등록된 기능을 활성화하도록 브라우저에 지시합니다.

사실 이는 실행해야 할 작업의 대기열에서 벗어나는 기술입니다. 이전 예제로 돌아가서 JavaScript 엔진이 onkeypress를 실행할 때 여러 스레드의 동기화된 실행이 없으므로 새로 생성된 요소의 포커스 및 선택 이벤트를 동시에 처리하는 것은 불가능합니다. onkeypress를 완료한 후, 예제 1에서 볼 수 있듯이 JavaScript 엔진은 이 두 이벤트를 삭제했습니다. 예제 2에서는 setTimeout이 특정 대기열의 작업을 새 대기열로 이동할 수 있으므로 예상한 결과를 얻을 수 있습니다.

이것이 지연된 이벤트가 0인 setTimeout의 실제 목적입니다. 여기에서 예제 3을 볼 수 있습니다. 해당 작업은 입력된 텍스트를 실시간으로 업데이트하는 것입니다. 지금 시도해 보십시오. 예를 들어 a, a를 입력하면 미리보기 영역이 항상 한 비트 뒤처져 있음을 알 수 있습니다. 미리보기 영역에는 가 나타나지 않습니다. b를 입력하면 a가 조용히 나타납니다. 사실 미리보기 영역을 입력 상자와 동기화하는 방법이 있습니다. 위의 방법이 해결 방법이므로 직접 시도해 보세요.