>웹 프론트엔드 >JS 튜토리얼 >js 실행 메커니즘의 개념은 무엇입니까? js 실행 메커니즘 구현 방법

js 실행 메커니즘의 개념은 무엇입니까? js 실행 메커니즘 구현 방법

不言
不言원래의
2018-08-11 16:06:031551검색

이 기사가 여러분에게 제공하는 것은 js 실행 메커니즘의 개념입니까? js 실행 메커니즘의 구현 방법에는 특정 참조 값이 있습니다. 도움이 필요한 친구가 이를 참조할 수 있기를 바랍니다.

실제 개발에서는 요청이 완료된 후 항상 요청으로 얻은 데이터를 특정 개체나 변수에 할당하려고 합니다. 요청의 콜백 함수에서 값이 할당되지 않은 경우, 그러나 요청 문에서 아래 값을 할당하면 요청에서 얻은 데이터는 정상이지만 할당 후 변수는 정의되지 않은 것을 알 수 있습니다. 왜 이런가요?
먼저 동기화와 비동기라는 개념을 이해해야 합니다. 우리 모두 알고 있듯이 js는 단일 스레드 언어입니다. 즉, js는 한 번에 하나의 작업만 실행할 수 있습니다. 작업이 여러 개인 경우 작업 순서대로 실행됩니다. 그러나 작업 중 하나가 무한 루프에 빠지는 등 시간이 많이 걸리면 다른 작업을 실행할 수 없어 브라우저가 응답하지 않게 됩니다. 그렇다면 js는 이를 어떻게 해결할까요? 이는 작업을 실행을 위해 동기 모드와 비동기 모드로 나누는 것입니다. 동기화는 위와 같으며, 비동기식은 콜백 함수가 2개 이상 있다는 뜻입니다. 작업이 끝나면 다음 작업을 실행하지 않고 콜백 함수를 실행하는데요. 그래서 이렇게 하는 것과 동기화의 차이점이 무엇인지 궁금해하시는 분들도 계십니다. ? 차이점은 후자의 작업이 실행되기 전에 이전 작업이 완전히 실행될 때까지 기다릴 필요가 없다는 것입니다. 따라서 우리가 얻는 프로그램 실행 순서는 작업 순서가 아닙니다.

setTimeout(function(){
    console.log('第一个延时调用');
});
console.log('哈哈哈');
new Promise(function(resolve){
    console.log('promise任务吗');
    resolve();
}).then(function(){
    console.log('回调函数???')
});
console.log('嘻嘻嘻');
setTimeout(function(){
    console.log('第二个延时调用');
});

실행 결과는 어떻습니까?
하하하
약속된 작업
히히히
콜백 기능? ? ?

첫 번째 지연 통화
두 번째 지연 통화
이게 왜죠? setTimeout이 마지막에 실행되는 이유는 무엇입니까? 분명히 0ms입니다.
은 동기 및 비동기 모드 외에도 작업을 macrotasksmicrotasks으로 더 나누었기 때문입니다.
매크로 작업: 전체 코드 스크립트 포함, setTimeout, setInterval
마이크로 작업: Promise, process.nextTick
실행 시 매크로 작업 진입 후 첫 번째 루프를 시작한 후 모두 실행 마이크로 작업 작업을 수행한 후 매크로 작업의 다음 주기를 수행합니다.
위 코드에서 매크로 태스크를 입력하고 setTimeout을 매크로 태스크로 등록한 후 큐에 넣은 후 실행합니다. 하하하 새로운 Promise가 발생하면 콜백 함수가 마이크로태스크 큐를 배치하고, 그런 다음 이를 실행합니다. 두 개의 setTimeouts는 위와 같습니다. 그런 다음 마이크로 작업을 실행하면 여기에는 희희희만 있습니다. 마지막으로 다음 매크로 작업을 입력합니다.

관련 권장사항:

js 실행 메커니즘 예제에 대한 자세한 설명

JS 실행 메커니즘에 대한 간략한 분석

위 내용은 js 실행 메커니즘의 개념은 무엇입니까? js 실행 메커니즘 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.