소개

JavaScript 이벤트 순환은 모든 개발자가 반드시 이해하고자 하는 가장 기본적인 개념 중의 하나이다.이것도 면접에서 가장 흔히 볼 수 있는 문제 중의 하나다.
JavaScript는 본질적으로 단일 스레드입니다. 즉, 한 번에 하나의 작업만 수행할 수 있습니다.그러면 요청의 실행 시간이 2분을 초과하면 어떻게 됩니까?사용자가 계속 기다릴까요?이것은 당연히 이상적인 상황이 아니다.고맙게도 자바스크립트의 이벤트 순환 구조는 여러 개의 요청을 비동기적으로 처리하는 능력을 제공하기 때문에 구출 작용을 한다.
우선 이벤트 순환 구조를 구성하는 다음 구성 요소를 살펴보겠습니다.

호출 스택

Web API

이벤트 대기열

일단 우리가 그것들이 어떻게 협동하여 일을 하는지 이해하려 한다면, 사건의 순환을 설명하는 것은 매우 간단해진다.

스택 호출

호출 스택은 JavaScript 엔진의 일부입니다. 스택일 뿐입니다. 그 안에 항목을 추가할 수 있습니다. 먼저 추가한 항목을 마지막으로 처리할 수 있습니다.다시 말하면 FILO-선진 선출 원칙을 따른다.
실행을 트리거한 모든 JavaScript 함수의 자리 표시자 또는 보존 영역으로 스택을 호출합니다.
다음 코드 예시를 보십시오. 함수 "Say Hello"가 호출 창고에 어떻게 추가되었는지 알아보십시오.

const sayHello = () => {
  console.log('Hello from Skay');
} 

sayHello();

단계 1 - 호출 스택에 sayHello 함수를 추가합니다.

다음 그림에서 알 수 있듯이 함수sayHello () 를 호출하면 호출 창고에 추가됩니다.

단계 2 및 3 - 함수는 값을 반환하고 호출 스택에서 팝업

함수가 값을 반환하면 콘솔에 "Hello from Skay"출력이 표시됩니다.함수가 거의 즉시 되돌아오면 이 함수도 호출 창고에서 꺼집니다.

이제 두 개의 함수를 포함하는 코드 예시를 살펴보고 자바스크립트 엔진이 어떻게 실행하는지 알아보자.

const sayHello = () => {
  console.log('Hello from Skay');
}

const timeoutFunction = () => {
  return setTimeout(() => {
    console.log('Hello from Timeout Function');
  }, 1000)
}

sayHello();
timeoutFunction();

앞에서 말한 바와 같이, 이 두 함수는 호출 창고에 추가되었습니다. 아래와 같습니다.함수sayHello()는 함수 실행이 끝난 후 창고에서 팝업합니다.

그러나 두 번째 함수인 "timeoutFunction"은 웹 API의 일부인 setTimeout 함수를 되돌려줍니다.우선 웹 API가 무엇인지 살펴보겠습니다.

Web API

웹 API는 웹 브라우저에 내장되어 있으며, 브라우저에서 나온 데이터를 처리하여 복잡하고 유용한 일을 완성할 수 있습니다.주요 내용은 JavaScript 언어의 일부분은 아니지만 핵심 JS 언어 위에 구축되어 지리적 위치, 로컬 저장소 등 다른 기능을 제공한다.
따라서 함수 "timeoutFunction"이 실행될 때, "setTimeout"함수를 되돌려주고 창고에서 꺼냅니다.
setTimeout 함수는 웹 API의 일부이기 때문에 다음과 같이 웹 API로 이동합니다.또한 "setTimeout"함수에 전달된 매개 변수에 따라 웹 API의 타이머 함수를 다음 그림과 같이 1초(1000ms)로 설정합니다.

그럼 1초 뒤에 무슨 일이 일어날까요?이상적인 경우, 호출 창고로 되돌아갈 함수를 예상합니다.그러나 이벤트 대기열에 추가합니다.

이벤트 대기열

이벤트 대기열은 창고와 유사한 데이터 구조로 데이터를 잠시 저장합니다. 주의해야 할 것은 먼저 추가된 데이터가 먼저 처리된다는 것입니다.다시 말하면 그것은 선진적인 선출 원칙을 따른다.
따라서 웹 API의 setTimeout 함수는 다음과 같이 대기열에 1초 후에 추가됩니다.

이벤트 순환

마지막으로, 우리는 줄곧 기다렸던'사건 순환'.이벤트 순환의 기능은 이벤트 대기열을 호출 창고에 연결하는 것으로 간단하게 설명할 수 있습니다.

이벤트 순환은 다음과 같습니다.

호출 창고가 비어 있는지, 모든 함수가 실행되었는지, 호출 창고에서 꺼졌는지 확인합니다.

호출 창고가 비어 있으면 첫 번째 항목을 이벤트 대기열에서 호출 창고로 이동합니다.

setTimeout 함수가 호출 스택에 추가되었을 때, 이 함수는 컨트롤러에서'Hello from Timeout function'출력을 되돌려주고 스택에서 꺼냅니다.

이것이 바로 사건 순환에 관한 모든 지식이다.삽화의 해석이 사건의 순환을 간단한 방식으로 이해하는 방법을 제공하기를 바란다.
사실상, 구축된 짝수 순환을 실시간으로 시각화할 수 있는 도구가 있습니다. this link. 에서 이 도구에 접근할 수 있습니다.

결론

한 마디로 하면 본고에서 우리는 자바스크립트가 본질적으로 단일 라인이고 이벤트 순환을 사용하는 것을 이해했다. 이것은 호출 창고, 웹 API와 이벤트 대기열을 통해 여러 개의 요청을 처리하는 것을 지원한다.
이벤트 순환은 기본적으로 JavaScript 엔진이 대기열을 보고 실행할 실시간 함수가 있는지 확인하고 먼저 추가한 함수를 선택하여 호출 스택으로 이동합니다.
우리는 비동기식 setTimeout 함수를 사용하여 상술한 개념을 보여 주었는데, 이 함수는 웹 API의 일부분이다.
나는 네가 이 문장을 좋아하길 바란다.만약 당신이 있다면, 나의 시사통신을 구독해 주십시오. 트위터에서 나를 주목하는 것을 잊지 마세요

다음 글도 볼 수 있습니다.