JavaScript의 동기식과 비동기식의 차이점 소개

이 글은 JavaScript의 동기화와 비동기의 차이점을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

javascript 언어는 "단일 스레드" 언어입니다.
Java 언어와 달리 클래스는 Thread를 상속한 다음 thread.start를 사용하여 스레드를 엽니다.
그래서 JavaScript는 처리든 패키징이든 조립 라인, 즉 조립 라인과 같으며 동시에 여러 작업과 프로세스를 수행할 수 없습니다.

"동기성" - 사람들에게 "함께"라는 단어를 즉시 상기시킵니다.

"비동기성"은 말 그대로 다른(다른) 작업을 수행하는 것 같습니다. ,
가장 먼저 떠오르는 단어는 '샤오밍이 아이스크림을 먹고 숙제를 동시에 하는 동안...'일 수도 있습니다. . 아이스크림을 먹은 후 숙제는 글을 쓴 후 비동기식입니까? 그것은 큰 실수가 될 것입니다!

실제로는 동기식과 비동기식,
뭐든 일을 할 때 조립 라인(싱글 쓰레드)은 하나뿐이다 #🎜 🎜#,
동기식과 비동기식의 차이점은 이 파이프라인의 각 프로세스 실행 순서가 다르다는 것입니다.

가장 기본적인 비동기식은 setTimeout 및 setInterval 함수입니다.

은 매우 일반적이지만 이것이 실제로 비동기식이라는 것을 아는 사람은 거의 없습니다.
왜냐하면 js를 제어할 수 있기 때문입니다. 실행 순서. 간단히 다음과 같이 이해할 수도 있습니다.
프로그램의 일반적인 실행 순서를 변경할 수 있는 작업은 비동기 작업으로 간주될 수 있습니다. 다음 코드는:

    console.log( "1" );
    setTimeout(function() {
        console.log( "2" )
    }, 0 );
    setTimeout(function() {
        console.log( "3" )
    }, 0 );
    setTimeout(function() {
        console.log( "4" )
    }, 0 );
    console.log( "5" );

출력 순서는 무엇입니까?

setTimeout(function, time)의 대기 시간을 0으로 설정했음에도 불구하고 그 안에 있는 함수가 나중에 실행되는 것을 볼 수 있습니다.

setTimeout의 시간 지연은 0이지만,

함수도 큐에 들어가 다음 실행 기회를 기다리며,
현재 코드(아니요 참조) 필요 대기열에 추가된 프로그램)은 해당 대기열의 프로그램이 완료되기 전에 완료되어야 합니다.
따라서 결과가 예상과 동일하지 않을 수 있습니다.

여기서 "큐"(예: 작업 대기열)에 대해 이야기합니다. 이 대기열에 배치되는 것은 setTimeout의 함수입니다.# 🎜 🎜#이러한 함수는 차례로 큐에 추가됩니다.
즉, 큐 외부의 모든 코드가 실행된 후에 큐에 있는 모든 함수의 프로그램이 실행됩니다
왜 그럴까요? 프로그램을 실행할 때 브라우저는 시간이 많이 걸리는 프로그램으로 setTimeout 및 ajax 요청과 같은 메서드를 기본적으로 사용하기 때문입니다(시간이 많이 걸리지는 않지만)
큐에 추가하면 저장 공간이 많이 소모됩니다. 시간이 많이 걸리는 프로그램의 대기열. 시간이 많이 걸리지 않는 프로그램이 모두 실행된 후 대기열에 있는 프로그램이 순서대로 실행됩니다.

원래 시작점으로 돌아왔습니다. 자바스크립트는 단일 스레드입니다. 단일 스레드는 모든 작업을 대기열에 넣어야 하며 이전 작업이 완료될 때까지 다음 작업이 실행되지 않음을 의미합니다.

이전 작업이 오래 걸리면 다음 작업은 기다려야 합니다.

그래서 작업 대기열이라는 개념이 있습니다. 연산량이 많아서 큐가 바쁘고 CPU가 너무 바쁘다면 잊어버리세요,

하지만 IO 장치(입출력 장치)가 매우 느리기 때문에 CPU가 유휴 상태인 경우가 많습니다(예: Ajax 작업은 네트워크에서 데이터를 읽습니다), 아니요

계속하기 전에 결과가 나올 때까지 기다려야 합니다. 따라서 JavaScript 언어 설계자는 이때 메인 스레드가 IO 장치를 완전히 무시하고
대기 작업을 일시 중지하고 이후 작업을 먼저 실행할 수 있음을 깨달았습니다. IO 장치가 결과를 반환할 때까지 기다린 다음 돌아가서 일시 중지된 작업을 계속 실행합니다.

그래서 모든 작업은 두 가지 유형으로 나눌 수 있습니다.

하나는 동기 작업(동기)이고 다른 하나는 비동기 작업(비동기)입니다. 동기 작업은 메인 스레드에서 실행 대기 중인 작업을 의미합니다.

다음 작업은 이전 작업이 실행된 후에만 실행될 수 있습니다. 비동기 작업은 메인 스레드에 진입하지 않고 " 작업 대기열"(작업 대기열),

메인 스레드 작업이 완료되고 "작업 대기열"이 메인 스레드에 알리고 작업 실행을 요청하기 시작한 경우에만 작업이 실행을 위해 메인 스레드에 들어갑니다.

구체적으로 비동기 실행 메커니즘은 다음과 같습니다:

모든 동기 작업은 메인 스레드에서 실행되어 실행 컨텍스트 스택을 형성합니다. .
메인 스레드 외에 "작업 대기열"도 있습니다. 비동기 작업에 실행 결과가 있는 한 이벤트는 "작업 대기열"에 배치됩니다.
"실행 스택"의 모든 동기화 작업이 실행되면 시스템은 "작업 대기열"을 읽어 그 안에 어떤 이벤트가 있는지 확인합니다. 해당 비동기 작업은 대기 상태를 종료하고 실행 스택에 들어가 실행을 시작합니다.
메인 스레드는 위의 세 번째 단계를 계속 반복합니다.
메인 스레드가 비어 있는 한 "작업 대기열"을 읽습니다. 이것이 JavaScript의 실행 메커니즘입니다. 이 과정이 계속 반복됩니다.

"작업 대기열"의 이벤트에는 IO 장치 이벤트 외에도
일부 사용자 생성 이벤트(예: 마우스 클릭, 페이지 스크롤 등),
예: $(selectot).click(function)도 포함됩니다. ), 이는 상대적으로 시간이 많이 걸리는 작업입니다.
이러한 이벤트의 콜백 함수가 지정되어 있는 한 이러한 이벤트는 발생 시 "작업 대기열"에 들어가고 기본 스레드가 읽을 때까지 기다립니다.

소위 "콜백 함수"(콜백)은 메인 스레드에 의해 중단되는 코드입니다. 앞서 언급한 클릭 이벤트 $(selectot).click(function)의 함수가 콜백 함수입니다. 비동기 작업은 콜백 함수를 지정해야 합니다. 메인 스레드가 비동기 작업 실행을 시작하면 해당 콜백 함수가 실행됩니다. 예를 들어 ajax의 성공, 완료 및 오류도 자체 콜백 함수를 지정하며 이러한 함수는 "작업 대기열"에 추가되어 실행을 기다립니다.

위 내용은 JavaScript의 동기식과 비동기식의 차이점 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!