비동기 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은 프로그램 실행을 차단하지 않습니다. 프로그램을 먼저 실행하는 것이 주요 논리입니다. 시간이 많이 걸리는 작업의 실행을 연기하는 것입니다.

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

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");

　　　　}, 1000);

　　}

jQuery.publish("done")的意思是，f1执行完成后，向”信号中心”jQuery发布”done”信号，从而引发f2的执行。

此外，f2完成执行后，也可以取消订阅（unsubscribe）。

　　jQuery.unsubscribe("done", f2);

这种方法的性质与”事件监听”类似，但是明显优于后者。因为我们可以通过查看”消息中心”，了解存在多少信号、每个信号有多少订阅者，从而监控程序的运行。

四、Promises对象

Promises对象是CommonJS工作组提出的一种规范，目的是为异步编程提供统一接口。

简单说，它的思想是，每一个异步任务返回一个Promise对象，该对象有一个then方法，允许指定回调函数。比如，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를 구현하는 4가지 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!