(일반적인 인터뷰 질문) setTimeout부터 js의 비동기 원리까지 js 기본

이것은 매우 기본적이지만 쉽게 간과되는 질문입니다. 누구나 이 방법을 사용하는 방법을 알고 있지만 프로세스가 무엇인지 자세히 연구하지 않았습니다.

 <input type="text" value="a" name="input" onkeydown="alert(this.value)" />
<input type="text" value="a" name="input" onkeydown="var me=this;setTimeout(function(){alert(me.value)},0)" >

#🎜 🎜# 첫 번째 keydown에서는 입력에 원래 값이 팝업되지만 두 번째 keydown에서는 업데이트된 값이 팝업됩니다. 이는 지연이 0으로 설정되어 있지만 거의 즉시 트리거되기 때문입니다. 여전히 실행 대기열 뒤에 추가되지만 이 비동기 프로세스에서는 콜백 함수가 실행될 때 출력이 이미 업데이트된 값입니다. 여기서 또 다른 문제는 내부와 외부의 서로 다른 기능이 나타내는 문제입니다. #… 여기에는 몇 가지 비동기 속성이 있습니다. js는 단일 스레드 언어입니다. 브라우저는 작업(함수)을 실행하기 위해 하나의 메인 스레드만 js에 할당하지만, 이러한 작업은 한 번에 하나의 작업만 실행될 수 있습니다. 네트워크 요청, 타이머, 이벤트 모니터링과 같은 일부 작업은 다른 작업처럼 실행을 기다리기 위해 대기하는 경우 실행 효율성이 매우 낮고 심지어 페이지 오류가 발생할 수도 있습니다. 실패합니다. 따라서 브라우저는 주로 http 요청 스레드, 브라우저 타이밍 트리거 및 브라우저 이벤트 트리거 스레드를 포함하여 시간이 많이 걸리는 작업을 위해 추가 스레드를 열었습니다. 이러한 작업은 비동기적입니다.

브라우저는 네트워크 요청과 같은 비동기 작업을 위해 별도의 스레드를 엽니다. 따라서 문제는 이러한 비동기 작업이 완료된 후 메인 스레드가 어떻게 알 수 있느냐는 것입니다. 답은 콜백 함수입니다. 전체 프로그램은 이벤트 중심입니다. 예를 들어, 타이머를 설정하는 코드가 있습니다. 이 코드가 실행되면 브라우저는 타이밍 작업을 비동기적으로 수행합니다. 이때 타이밍 이벤트가 트리거됩니다. 작업 대기열에 배치됩니다. 전체 프로그램은 이러한 이벤트에 의해 구동됩니다.

그래서 js는 항상 단일 스레드였으며 브라우저는 비동기를 달성하는 열쇠입니다.

다음은 인터넷에서 재현됩니다.

js가 되었습니다. 작업을 수행한다는 것은 작업 큐에서 작업을 추출하여 실행을 위해 메인 스레드에 넣는 것입니다. 아래에서 좀 더 깊이 이해해보자.

필립 로버츠의 연설 "도와주세요, 이벤트 루프에 갇혀 있습니다"에서 나온 그림은 매우 심오합니다!

방금 배운 개념을 그림과 일치시켜 보겠습니다. 위에서 언급한 비동기 작업을 위해 브라우저가 여는 스레드는 WebAPI로 총체적으로 이해될 수 있습니다. 위에서 언급한 작업 대기열은 우리가 메인 스레드라고 부르는 것입니다. 점선으로 구성된 부분입니다. 힙과 스택이 함께 js 메인 스레드를 구성합니다. 예를 들어 그림에는 메인 스레드인 foo() 함수가 있습니다. 함수 본문을 실행할 때 위의 함수가 여전히 실행되어야 함을 발견하여 함수가 실행되면 해당 함수가 스택에서 제거됩니다. 스택이 지워졌다는 것은 작업이 실행되었음을 의미합니다. 이때 콜백 큐에서 다음 작업을 검색하여 스택에 푸시합니다. 이 검색 프로세스를 이벤트 루프라고 합니다. 작업 대기열에 작업이 있습니다.

관련글:

js 비동기 파일로더에 대한 자세한 설명, js 비동기 로딩에 대한 자세한 설명

# 🎜🎜# 네이티브 JS로 Ajax를 비동기식으로 구현하는 방법 #

위 내용은 (일반적인 인터뷰 질문) setTimeout부터 js의 비동기 원리까지 js 기본의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!