Javascript 이벤트 순환이란?
8515 단어 webdevjavascriptcodenewbie
본고는 자바스크립트가 실행될 때의 환경, 이벤트 순환과 그 배후의 메커니즘을 이해함으로써 자바스크립트가 왜 단일 라인이지만 비동기적인지 이해하도록 도와준다.
Javascript 런타임
각 브라우저에는 Javascript 런타임 환경이 있습니다.
다음은 가시화 운행을 돕는 예이다.
따라서javascript가 실행될 때 포함
Javascript 엔진
모든 브라우저는 서로 다른 버전의javascript 엔진을 사용합니다.그중 일부는 V8(Chrome), Quantum(Firefox), 웹키트(Safari)가 유행한다.엔진 내부에 메모리 더미와 호출 더미가 있습니다.
메모리 더미
우리가 대상을 만들거나 함수를 설명하거나 변수를 분배할 때마다 메모리를 분배합니다.이 메모리는 더미에 저장된다.
스택 호출
javascript의 단일 루틴 특성은 호출 창고가 하나밖에 없기 때문입니다.호출 창고에서 자바스크립트 코드가 한 줄씩 읽히고 실행됩니다.호출 스택은 먼저 추가된 함수를 마지막으로 실행하는 고급 선출(FILO) 원칙을 따릅니다.함수가 실행되면 창고에서 팝업됩니다.우리들은 이 개념을 명확하게 하기 위해 몇 가지 코드를 보았다.
const getMovie = () =>{
console.log ('Avengers')
}
getMovie()
// Avengers
그림에서 보듯이 함수는 창고에 추가되어 실행되고 삭제됩니다.창고의 맨 위에 있는 함수는 초점 함수입니다. 창고를 되돌려주고 팝업할 때 JS 엔진은 다음 프레임으로만 이동합니다. (창고의 항목을 호출하는 것을 창고 프레임이라고 합니다.)호출 스택은 맨 위에 있는 프레임으로 돌아간 다음에 다음 프레임으로 돌아갑니다. 이것이 바로 우리가 JS 엔진이 동기화되어 실행된다고 말하는 이유입니다.
Web API
웹 API는 브라우저에서 제공합니다. 브라우저의 자바스크립트가 실행될 때 환경에 있지만 자바스크립트 엔진에 없습니다.HTTP, AJAX, 지리적 위치, DOM 이벤트, setTimeout은 웹 API의 예이다.웹 API가 비동기 코드를 작성하는 데 어떻게 도움을 주는지 알아보기 위해 코드 예시를 사용합니다.
console.log ('1') // outputs 1 in the console
const getNumber = () =>{
//in this setTimeout, we set the timer to 1s (1000ms = 1s)
//and pass a callback that returns after 1s
setTimeout((cb)=>{
console.log('2')
}, 1000)
}
getNumber()
console.log('3')
//1
//3
//2
그럼 1초 후 타이머 카운트다운이 끝나면 무슨 일이 일어날까요?웹 API에서 리셋을 팝업하는 창고라고 생각할 수도 있지만, 이렇게 하면 리셋은 실행 중인 다른 코드 사이에 무작위로 나타납니다. 이러한 상황을 방지하기 위해 웹 API는 리셋을 메시지 대기열에 추가합니다.
현재 자바스크립트가 실행될 때 창고가 비어 있다는 것을 어떻게 알 수 있습니까?또는, 이벤트는 어떻게 메시지 대기열에서 호출 창고로 전송됩니까?사건 순환에 들어가다.
이벤트 순환 작업은 호출 창고와 메시지 대기열을 지속적으로 감시하는 것입니다.호출 창고가 비어 있으면, 메시지 대기열의 첫 번째 이벤트를 받아들여 호출 창고로 전송합니다.호출 창고와 메시지 대기열은 한동안 비어 있을 수 있지만, 이벤트 순환은 검사를 멈추지 않습니다.
우리 코드로 돌아가면, 이벤트가 반복적으로 호출된 창고가 비어 있는지 확인하고, 호출된 창고가 비어 있는지 확인합니다. 따라서 컴파일 (cb) 을 창고로 전송하고, 창고에서 컨트롤러로 2를 되돌려 창고에서 삭제합니다.우리의 코드가 실행되었다.
그 밖에
0밀리초를 초과하여 시간 초과를 설정하면 어떤 일이 일어날까요?
const getCurrency = ()=>{
setTimeout(()=>{
console.log('dollar')
}, 0)
}
getCurrency()
const name = () =>{
console.log('Frank')
}
name()
// Frank
// dollar
리셋은 다른 대기 메시지가 완성되고 창고가 정리될 때까지 기다려야 창고로 전송되고 돌아올 수 있습니다.
결론
자바스크립트가 실행될 때의 이해는 자바스크립트가 어떻게 실행되고 서로 다른 부분이 어떻게 조합되는지 이해하는 데 도움이 되며 자바스크립트가 우리가 알고 있는 위대한 언어가 되도록 합니다.나는 이 문장이 너로 하여금 이 기본 개념에 대해 견고한 이해를 가지게 할 수 있기를 바란다.안녕히 계세요!
Reference
이 문제에 관하여(Javascript 이벤트 순환이란?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/kelvinkirima014/what-is-the-javascript-event-loop-588b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
