집 > 기사 > 웹 프론트엔드 > JS 비동기 프로그래밍 예제에 대한 자세한 설명

JS 비동기 프로그래밍 예제에 대한 자세한 설명

小云云원래의: 2018-02-28 11:31:141470검색

JS 언어의 실행 환경은 "단일 스레드"입니다. 비동기 프로그래밍이 발생하는 이유는 무엇입니까?

단일 스레드는 한 번에 하나의 작업만 완료할 수 있음을 의미합니다. 여러 작업이 있는 경우 대기열에 넣어야 하며 다음 작업이 실행되기 전에 이전 작업이 완료될 때까지 기다려야 합니다.

두 가지 작업 실행 모드: 동기 및 비동기
"비동기 모드":
콜백 함수는 비동기 프로그래밍의 가장 기본적인 방법입니다. 각 작업에는 하나 이상의 콜백 함수가 있습니다. 이전 작업이 실행된 후 다음 작업이 실행되지 않고, 이전 작업이 완료된 후 후자의 작업이 실행되므로 프로그램의 실행 순서는 다음과 같습니다. 작업과 일치합니다. 정렬 순서가 일관되지 않고 비동기적입니다.
비동기 프로그래밍의 네 가지 방법:

1. 콜백 함수
비동기 프로그래밍의 가장 기본적인 방법입니다.
f1과 f2라는 두 가지 함수가 있고, f2가 전자의 실행 결과를 기다린다고 가정해 보겠습니다.
f1이 시간이 많이 걸리는 작업인 경우 f1의 콜백 함수로 f2를 작성할 수 있습니다.

function f1(callback){ 

  setTimeout(function(){ 

  //f1的任务代码 

  callback(); 

  },1000); 

  }

코드 실행

f1(f2)
이 방법을 사용하면 이해하고 배포하기가 간단하고 쉽다는 장점이 있습니다. 단점은 코드를 읽고 유지하는 데 도움이 되지 않으며, 프로세스가 매우 혼란스럽고 하나만 있다는 것입니다. 각 작업마다 콜백 함수를 지정할 수 있습니다.

2. 이벤트 모니터링
이벤트 중심 모델을 채택하세요. 작업 실행은 코드의 순서가 아니라 이벤트 발생 여부에 따라 결정됩니다.
먼저 이벤트를 f1에 바인딩합니다(jQuery 작성 방법 사용).

f1.on(‘done’,f2); 

  //当f1发生done事件，就执行f2。然后对f1进行改写：

는 다음과 같습니다.

fuction f1(){ 

  setTimeout(function(){ 

  //f1的任务代码 

  f1.trigger(‘done’); 

  },1000); 

  }

f1.tigger('done')은 실행이 완료된 후 done 이벤트가 즉시 트리거되어 f2 실행을 시작한다는 의미입니다.
이 방법의 장점은 다음과 같습니다. 이해하기 쉽고, 여러 이벤트를 바인딩할 수 있으며, 각 이벤트는 여러 콜백 함수를 지정할 수 있고, 분리할 수 있어 모듈화에 도움이 됩니다.
단점: 전체 프로그램이 이벤트 중심으로 이루어져야 하며 실행 프로세스가 매우 불분명해집니다.

JS 비동기 프로그래밍 예제에 대한 자세한 설명

관련 기사