예제를 통해 js 비동기 프로그래밍에 대한 자세한 설명-JS 튜토리얼-php.cn

예제를 통해 js 비동기 프로그래밍에 대한 자세한 설명

小云云

풀어 주다： 2018-03-07 10:48:28

원래의

1406명이 탐색했습니다.

Javascript 언어의 실행 환경은 "단일 스레드"입니다. 소위 "단일 스레드"는 한 번에 하나의 작업만 완료할 수 있음을 의미합니다. 여러 작업이 있는 경우 이전 작업이 완료된 후 다음 작업이 실행되며 대기열에 추가되어야 합니다.

- 이 모드의 장점은 구현하기가 상대적으로 간단하고 실행 환경이 상대적으로 간단하다는 것입니다. 단점은 하나의 작업이 오랜 시간이 걸리는 한 후속 작업을 대기열에 넣어

기다려야 한다는 것입니다. 전체 프로그램의 실행을 지연시킵니다. 일반적인 브라우저 무응답(일시 중지)은 오랫동안 실행되는 특정 Javascript 코드 조각(예: 죽은

루프)으로 인해 발생하는 경우가 많으며, 이로 인해 전체 페이지가 이 위치에 멈춰 다른 작업을 수행할 수 없게 됩니다.

이 문제를 해결하기 위해 Javascript 언어는 작업 실행 모드를 동기(Synchronous)와 비동기(Asynchronous)의 두 가지 유형으로 나눕니다.

"동기 모드"는 이전 단락의 모드입니다. 후자의 작업은 실행하기 전에 이전 작업이 끝날 때까지 기다립니다.

"비동기 모드" 완전히 다른 경우 각 작업에는 하나 이상의 콜백 함수(콜백)가 있습니다. 이전 작업이 종료된 후 다음 작업은 실행되지 않지만, 후자의 작업은 이전 작업이 끝날 때까지 기다리지 않고 실행됩니다. 그래서 프로그램의 실행 순서는 작업 순서와 일관되지 않고 비동기적입니다.

"비동기 모드"는 매우 중요합니다. 브라우저 측에서는 브라우저가 응답하지 않는 것을 방지하기 위해 장기 실행 작업을 비동기식으로 수행해야 합니다. 가장 좋은 예는 Ajax 작업입니다.

서버 측에서는 "비동기 모드"가 유일한 모드이기도 합니다. 실행 환경이 단일 스레드이기 때문에 모든 http 요청이 동기적으로 실행되도록 허용하면 서버 성능이

급격히 저하될 것이며 곧 그렇게 될 것입니다. 무반응 상태가 됩니다.

4가지 "비동기 모드" 프로그래밍 방법:

1. 콜백 함수: 이것은 비동기 프로그래밍의 가장 기본적인 방법입니다.

두 가지 함수 f1과 f2. f1이 시간이 많이 걸리는 작업이라면 f1을 다시 작성하고 f2를 f1의 콜백 함수로 쓰는 것을 고려할 수 있습니다.

function f1(callback){

    setTimeout(function () {

        // f1的任务代码

        callback();

    }, 1000);

}

로그인 후 복사

실행 코드는 다음과 같습니다: f1(f2);

이러한 방식으로 동기 작업을 비동기 작업으로 전환합니다. f1은 프로그램 실행을 차단하지 않으며 이는 프로그램의 기본 논리를 실행하는 것과 같습니다. 먼저 시간이 많이 소요되는 작업을 연기합니다.

콜백 함수의 장점은 간단하고 이해하기 쉽고 배포하기 쉽다는 것입니다. 단점은 코드를 읽고 유지하는 데 도움이 되지 않는다는 것입니다. , 각 작업마다 하나의 콜백 함수만 지정할 수 있습니다.

2. 이벤트 모니터링

또 다른 아이디어는 이벤트 중심 모드를 사용하는 것입니다. 작업 실행은 코드의 순서가 아니라 이벤트 발생 여부에 따라 결정됩니다.

f1과 f2를 예로 들어보세요. 먼저 이벤트를 f1에 바인딩합니다(여기에서는 jQuery가 사용됨).

f1.on(&#39;done&#39;, f2);

로그인 후 복사

위 코드 줄은 f1에서 done 이벤트가 발생하면 f2가 실행된다는 의미입니다. 그런 다음 f1을 다시 작성합니다.

function f1(){

    setTimeout(function () {

        // f1的任务代码
    
        f1.trigger(&#39;done&#39;);

    }, 1000);

}

로그인 후 복사

f1.trigger('done')은 실행이 완료된 후 done 이벤트가 즉시 트리거되어 f2 실행을 시작한다는 의미입니다.

이 방법의 장점은 비교적 이해하기 쉽고, 여러 이벤트를 바인딩할 수 있고, 각 이벤트가 여러 콜백 함수를 지정할 수 있으며, "분리"될 수 있어 모듈화에 도움이 된다는 것입니다. 단점은 전체 프로그램이 이벤트 중심으로 이루어져야 하고 실행 프로세스가 매우 불분명해진다는 것입니다.

3. 게시/구독(관찰자 모드)

앞 절의 "이벤트"는 "신호"로 이해될 수 있습니다.

우리는 "신호 센터"가 있다고 가정합니다. 특정 작업이 실행되면 신호 센터에 신호를 "게시"하고 다른 작업은 신호 센터를 "구독"하여 언제 직접 실행할 수 있는지 알 수 있습니다. . 이를 "게시-구독 패턴"(게시-구독 패턴)이라고 하며 "관찰자 패턴"(관찰자 패턴)이라고도 합니다.

이 패턴의 구현은 다양합니다. 아래는 jQuery용 플러그인인 Ben Alman의 Tiny Pub/Sub입니다.

먼저, f2는 "Signal Center" jQuery에 대한 "done" 신호를 구독합니다.

jQuery.subscribe("done", f2);

로그인 후 복사

그런 다음 f1은 다음과 같이 다시 작성됩니다.

function f1(){

    setTimeout(function () {

        // f1的任务代码

        jQuery.publish("done");

    }, 1000);

}

로그인 후 복사

jQuery.publish("done")은 f1 실행이 완료된 후 "done" 신호가 "신호 센터" jQuery로 릴리스되어 f2를 실행합니다.

또한, f2 실행이 완료된 후에도 구독 취소가 가능합니다.

jQuery.unsubscribe("done", f2);

로그인 후 복사

이 방법의 성격은 "이벤트 청취"와 유사하지만 후자보다 훨씬 좋습니다. "메시지 센터"를 보고 프로그램 운영을 모니터링하여 신호 수와 각 신호의 구독자 수를 확인할 수 있기 때문입니다.

4. Promises 객체

Promises 객체는 비동기 프로그래밍을 위한 통합 인터페이스를 제공하기 위해 CommonJS 작업 그룹에서 제안한 사양입니다.

간단히 말하면 각 비동기 작업은 콜백 함수를 지정할 수 있는 then 메서드가 있는 Promise 개체를 반환한다는 아이디어입니다. 예를 들어 f1의 콜백 함수 f2는 다음과 같이 작성할 수 있습니다.

f1().then(f2);

f1().then(f2);

로그인 후 복사

f1要进行如下改写（这里使用的是jQuery的实现）：

function f1(){

    var dfd = $.Deferred();

    setTimeout(function () {

        // f1的任务代码

        dfd.resolve();

    }, 500);

return dfd.promise;

}

로그인 후 복사

这样写的优点在于，回调函数变成了链式写法，程序的流程可以看得很清楚，而且有一整套的配套方法，可以实现许多强大的功能。

比如，指定多个回调函数：