Javascript의 비동기 프로그래밍 4가지 방법 소개

Javascript 언어의 실행 환경은 "싱글 스레드"라는 것을 아실 겁니다.

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

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

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

"동기 모드"는 이전 단락의 모드입니다. 후자의 작업은 실행하기 전에 이전 작업이 끝날 때까지 기다립니다. 프로그램의 실행 순서는 "비동기 모드"와 일치합니다. 태스크에는 하나 이상의 콜백 함수(콜백)가 있습니다. 이전 태스크가 종료된 후 다음 태스크 대신에 콜백 함수가 실행되기 때문에 프로그램의 실행 순서가 달라집니다. 작업 순서와 일치하지 않으며 비동기적입니다.

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

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

1. 콜백 함수

비동기 프로그래밍의 가장 기본적인 방법입니다.

f1과 f2라는 두 가지 함수가 있고, f2가 전자의 실행 결과를 기다린다고 가정해 보겠습니다.

f1();f2();

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

function f1(callback){　　　
    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. Publish/Subscribe

이전 섹션의 "이벤트"는 "신호"로 이해될 수 있습니다.

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

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

먼저, f2는 "신호 센터" jQuery에 대한 "완료" 신호를 구독합니다.

　jQuery.subscribe("done", f2);

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

　　function f1(){　　　　
    　　setTimeout(function () {　　　　　　// f1的任务代码　　　　　　
    　　jQuery.publish("done");
　　　　}, 1000);
　　}

jQuery.publish("done")은 f1의 실행이 완료된 후 "done" 신호가 "Signal Center" jQuery로 해제되어 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);

而且，它还有一个前面三种方法都没有的好处：如果一个任务已经完成，再添加回调函数，该回调函数会立即执行。所以，你不用担心是否错过了某个事件或信号。这种方法的缺点就是编写和理解，都相对比较难。

你可能知道，Javascript语言的执行环境是”单线程”（single thread）。

所谓”单线程”，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。

这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。

为了解决这个问题，Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）。

“同步模式”就是上一段的模式，后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的；”异步模式”则完全不同，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。

“异步模式”非常重要。在浏览器端，耗时很长的操作都应该异步执行，避免浏览器失去响应，最好的例子就是Ajax操作。在服务器端，”异步模式”甚至是唯一的模式，因为执行环境是单线程的，如果允许同步执行所有http请求，服务器性能会急剧下降，很快就会失去响应。

위 내용은 Javascript의 비동기 프로그래밍 4가지 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!