자바스크립트에서 비동기식과 동기식의 차이점은 무엇입니까-프런트엔드 Q&A-php.cn

자바스크립트에서 비동기식과 동기식의 차이점은 무엇입니까

青灯夜游

풀어 주다： 2023-01-06 11:17:08

원래의

3329명이 탐색했습니다.

차이점: 동기화에서는 함수 호출이 발생하면 한 가지 작업을 하나씩 수행해야 하며, 비동기에서는 이전 작업이 완료될 때까지 다음 작업을 수행할 수 없습니다. 호출자 결과를 얻기 전에 후속 작업을 계속 수행할 수 있습니다.

자바스크립트에서 비동기식과 동기식의 차이점은 무엇입니까

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

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 장치(입력 및 출력 장치)가 매우 느리기 때문에(예: 데이터를 읽는 Ajax 작업 등) CPU가 유휴 상태인 경우가 많습니다. 네트워크에서) 진행하기 전에 결과가 나올 때까지 기다려야 합니다. 따라서 JavaScript 언어 설계자들은 이때 메인 스레드가 IO 장치를 완전히 무시하고 대기 작업을 일시 중지하고 나중 작업을 먼저 실행할 수 있다는 것을 깨달았습니다. IO 장치가 결과를 반환할 때까지 기다린 다음 돌아가서 일시 중지된 작업을 계속 실행합니다.

그래서 모든 작업은 두 가지 유형으로 나눌 수 있는데,

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

다음 작업은 이전 작업이 실행된 후에만 실행될 수 있습니다. 비동기 작업은 메인 스레드에 들어가지 않고 "작업 대기열"에 들어가는 작업을 나타냅니다. (작업 큐) 작업은 메인 스레드 작업이 완료된 후에만 실행을 위해 메인 스레드에 들어가고 "작업 큐"는 메인 스레드에 알리고 작업 실행을 요청하기 시작합니다.

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

메인 스레드는 위의 세 번째 단계를 계속 반복합니다.

메인 스레드가 비어 있는 한 "작업 대기열"을 읽습니다. 이것이 JavaScript의 실행 메커니즘입니다. 이 과정이 계속 반복됩니다.

"작업 대기열"의 이벤트는 IO 장치 이벤트 외에도

$(selectot)와 같은 사용자 생성 이벤트(예: 마우스 클릭, 페이지 스크롤 등)

도 포함됩니다. click(function )은 상대적으로 시간이 많이 걸리는 작업입니다.

이러한 이벤트의 콜백 함수가 지정되어 있는 한 이러한 이벤트는 발생 시 "작업 대기열"에 들어가고 기본 스레드가 읽을 때까지 기다립니다.

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

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 자바스크립트에서 비동기식과 동기식의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!