JavaScript의 EventLoop에 대한 질문

이 글은 JavaScript의 EventLoop 관련 지식을 자세히 소개합니다. 이 측면이 필요한 친구들은 참고할 수 있습니다.

예를 들어 브라우저가 단일 스레드이기 때문에 브라우저 프로세스가 차단되어 인터페이스를 렌더링하거나 다른 코드를 실행할 수 없다고 상상해 보세요. 사용자와의 상호 작용이 끊어집니다.

이것은 일반적으로 큰 문제가 아니지만 브라우저가 동시에 여러 개의 유사한 알고리즘을 실행하는 경우 이 문제는 심각해집니다.

특정 경험이 있는 대부분의 js 개발자는 코드의 비동기 실행, 특히 ajax 사용을 이해합니다.

// ajax(..) is some arbitrary Ajax function given by a library
var response = ajax('https://example.com/api');
console.log(response);
// `response` won't have the response

여기 응답으로는 원하는 결과를 얻을 수 없습니다.

대신 Xiangmian

ajax('https://example.com/api', function(response) {
  console.log(response); // `response` is now available
});

과 같은 콜백 함수를 통해 결과를 얻어야 합니다. 또한 다음 코드에서 async: false를 사용하는 것은 결코 좋은 생각이 아니라는 점을 기억하세요.

// This is assuming that you're using jQuery
jQuery.ajax({
  url: 'https://api.example.com/endpoint',
  success: function(response) {
    // This is your callback.
  },
  async: false // And this is a terrible idea
});

위의 예를 통해 비동기 기능이 유사한 브라우저 차단 문제를 해결하는 데 도움이 될 수 있다는 것을 이해해야 합니다.

물론 setTimeout(콜백, 밀리초)을 통해서도 동일한 로직을 구현할 수도 있습니다. 비동기식을 이해한다면 다음 코드가 실행될 때 무엇이 ​​출력될까요?

function first() {
  console.log('first');
}
function second() {
  console.log('second');
}
function third() {
  console.log('third');
}
first();
setTimeout(second, 1000); // Invoke `second` after 1000ms
third();

현재 비동기 처리 메커니즘의 원리는 무엇인가요? 여기에서는 이벤트 루프를 소개합니다. 이벤트 루프

이벤트 루프에는 콜 스택 및 콜백 큐를 모니터링하는 간단한 작업(태스크)이 있습니다. 호출 스택이 비어 있으면 큐에서 첫 번째 이벤트를 가져와 호출 스택에 푸시하여 효과적으로 실행합니다.

이 반복을 이벤트 루프에서는 Tick이라고 합니다. 각 이벤트는 단지 함수 콜백입니다.

console.log('Hi');
setTimeout(function cb1() { 
  console.log('cb1');
}, 5000);
console.log('Bye');

이 코드를 실행해 보세요. 아래 호출 스택은 이벤트 루프의 처리 흐름을 명확하게 보여줍니다.

setTimeout(...)은 이벤트 루프 대기열에 콜백을 자동으로 배치하지 않는다는 점에 유의하세요.

타이머를 설정합니다. 타이머가 만료되면 브라우저는 콜백을 이벤트 루프에 넣어 향후 틱이 실행되도록 합니다. 그러나 대기열에 추가된 다른 이벤트가 있을 수 있습니다. 콜백은 즉시 실행되지 않습니다.

JavaScript에서 비동기 코드를 시작하는 방법에 대한 많은 기사와 튜토리얼이 있으며, setTimeout(callback, 0)을 사용하는 것이 좋습니다.
이제 이벤트 루프가 수행되는 방식과 setTimeout이 작동하는 방식을 알았습니다.

다음 코드를 보시면 이해가 더 쉬우실 겁니다

console.log('Hi');
setTimeout(function() {
  console.log('callback');
}, 0);
console.log('Bye');

대기 시간을 0ms로 설정했지만 브라우저 콘솔에서의 결과는 다음과 같습니다.

Hi

Bye

callback

위 내용은 제가 컴파일한 내용입니다. , 앞으로 모든 사람에게 도움이되기를 바랍니다.

관련 기사:

Angular에서 zTree 코드를 통합하는 방법

노드 패키징 도구 Pkg(자세한 튜토리얼)

classList가 두 개의 버튼 스타일 전환을 구현하는 방법

위 내용은 JavaScript의 EventLoop에 대한 질문의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!