더 나은 프로그램을 작성하는 데 도움이 되는 Javascript 비동기 프로그래밍의 4가지 방법_javascript 기술

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

이 모드의 장점은 구현이 상대적으로 간단하고 실행 환경이 상대적으로 단순하다는 것입니다. 단점은 한 작업에 시간이 오래 걸리면 후속 작업을 대기열에 넣어야 한다는 것입니다. , 전체 프로그램 구현이 지연됩니다. 일반적인 브라우저 무응답(일시 중단)은 장시간 실행되는 특정 Javascript 코드 조각(예: 무한 루프)으로 인해 발생하는 경우가 많습니다. 이로 인해 전체 페이지가 이 위치에 멈춰 다른 작업을 수행할 수 없게 됩니다.

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

"동기 모드"는 이전 단락의 모드입니다. 후자의 작업은 실행하기 전에 이전 작업이 끝날 때까지 기다립니다. 프로그램의 실행 순서는 "비동기" 작업 순서와 일치합니다. 모드"는 완전히 다릅니다. 각 작업에는 하나 이상의 콜백 함수가 있습니다. 이전 작업이 끝난 후 다음 작업 대신 콜백 함수가 실행됩니다. 후자의 작업은 이전 작업이 끝나기 전에 실행되므로 프로그램의 실행 순서는 작업 순서와 일관성이 없고 비동기적입니다.

"비동기 모드"는 매우 중요합니다. 브라우저 측에서는 브라우저가 응답하지 않는 것을 방지하기 위해 장기 실행 작업을 비동기식으로 수행해야 합니다. 가장 좋은 예는 Ajax 작업입니다. 서버 측에서는 실행 환경이 단일 스레드이기 때문에 "비동기 모드"가 유일한 모드이기도 하며, 모든 http 요청이 동기적으로 실행되도록 허용하면 서버 성능이 급격히 떨어지고 매우 빠르게 응답하지 않게 됩니다.

이 기사에서는 "비동기 모드" 프로그래밍의 4가지 방법을 요약합니다. 이를 이해하면 보다 합리적인 구조, 더 나은 성능 및 더 쉬운 유지 관리를 갖춘 Javascript 프로그램을 작성할 수 있습니다.

1. 콜백 함수
비동기 프로그래밍의 가장 기본적인 방법입니다.
f1과 f2라는 두 가지 함수가 있고, f2가 전자의 실행 결과를 기다린다고 가정해 보겠습니다.

코드 복사 코드는 다음과 같습니다.

f1()
　f2( );

f1이 시간이 많이 걸리는 작업이라면 f1을 다시 작성하고 f2를 f1의 콜백 함수로 작성하는 것을 고려해 볼 수 있습니다.

코드 복사 코드는 다음과 같습니다.

함수 f1(콜백){
setTimeout(function () {
　　　　 // f1의 태스크 코드
　　callback();
　　}, 1000)
　}

실행 코드는 다음과 같습니다. 🎜 >

코드 복사 코드는 다음과 같습니다.

f1(f2); >
이런 식으로 동기 작업을 비동기 작업으로 전환합니다. F1은 프로그램 실행을 차단하지 않습니다. 이는 프로그램의 기본 논리를 먼저 실행하고 시간이 많이 걸리는 작업의 실행을 연기하는 것과 같습니다.

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


2. 이벤트 모니터링

또 다른 사고방식은 이벤트 중심 모델을 사용하는 것입니다. 작업 실행은 코드의 순서가 아니라 이벤트 발생 여부에 따라 결정됩니다. f1과 f2를 예로 들어보겠습니다. 먼저 이벤트를 f1에 바인딩합니다(여기에서는 jQuery가 사용됨).

코드 복사 코드는 다음과 같습니다. f1.on('done', f2 );

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

코드 복사 코드는 다음과 같습니다. function f1( ){

SetTimeout(function () {

// f1의 작업 코드
f1.trigger('done');
}, 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");


jQuery.publish("done")은 f1의 실행이 완료된 후 "done" 신호가 "신호 센터" jQuery로 방출되어 f2의 실행이 트리거된다는 의미입니다.

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

코드 복사 코드는 다음과 같습니다.

jQuery.unsubscribe("done", f2 );

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

4. Promises 객체
Promises 객체는 비동기 프로그래밍을 위한 통합 인터페이스를 제공하기 위해 CommonJS 작업 그룹에서 제안한 사양입니다. 간단히 말하면, 각 비동기 작업은 콜백 함수를 지정할 수 있는 then 메서드가 있는 Promise 개체를 반환한다는 아이디어입니다. 예를 들어 f1의 콜백 함수 f2는 다음과 같이 작성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

f1 ().then(f2);

f1은 다음과 같이 다시 작성해야 합니다(여기에서는 jQuery 구현이 사용됨).

코드 복사 코드는 다음과 같습니다.

function f1(){

　 var dfd = $.Deferred()
setTimeout(function () {
　　 / / f1의 태스크 코드
　　　dfd.resolve();
　　}, 500);
　　return dfd.promise; 프로그램 흐름을 명확하게 볼 수 있으며 많은 강력한 기능을 실현할 수 있는 완전한 지원 방법 세트가 있습니다.

예를 들어 여러 콜백 함수를 지정합니다.

코드 복사

코드는 다음과 같습니다. f1().then(f2).then(f3); 또 다른 예, 오류 발생 시 콜백 함수 지정:

코드 복사

코드는 다음과 같습니다. f1().then(f2).fail(f3); 🎜> 그리고 앞의 세 가지 방법에는 없는 또 다른 장점이 있습니다. 작업이 완료되고 콜백 함수가 추가되면 콜백 함수가 즉시 실행됩니다. 따라서 이벤트나 신호를 놓칠까 봐 걱정할 필요가 없습니다. 이 방법의 단점은 작성하고 이해하기가 상대적으로 어렵다는 것입니다.