자바스크립트 비동기 실행 및 연산 흐름 제어 예제에 대한 자세한 설명

1. Javascript 언어의 실행 환경은 "단일 스레드"입니다.

장점: 구현이 비교적 간단하고 실행 환경도 비교적 간단합니다.

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

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

2. "비동기 모드" 프로그래밍의 여러 방법:

(1) 콜백 함수: 장점은 간단하고 이해하고 배포하기 쉽다는 것이지만, 단점은 코드를 읽고 유지하는 데 도움이 되지 않는다는 것입니다. , 다양한 부분이 고도로 결합(Coupling)되어 프로그램 구조가 혼란스럽고 프로세스 추적이 어렵고(특히 콜백 함수가 중첩된 경우) 각 작업에 하나의 콜백 함수만 지정할 수 있습니다.

(2) 이벤트 중심 모드 채택(이벤트 모니터링): 이해하기 쉽고, 여러 이벤트를 바인딩할 수 있고, 각 이벤트가 여러 콜백 함수를 지정할 수 있으며, "분리"(디커플링)될 수 있다는 장점이 있습니다. 모듈식 구현에 도움이 됩니다. 단점은 전체 프로그램이 이벤트 중심으로 이루어져야 하고 실행 프로세스가 매우 불분명해진다는 것입니다.

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

3. 비동기 작업의 프로세스 제어.

(1) 직렬 실행: 프로세스 제어 함수를 작성하고 한 작업이 완료된 후 다른 작업이 실행되도록 합니다.

var items = [ 1, 2, 3, 4, 5, 6 ];
var results = [];
function series(item) {
 if(item) {
  async( item, function(result) {
   results.push(result);
   return series(items.shift());
  });
 } else {
  return final(results);
 }
}
series(items.shift());

Function 시리즈는 비동기 작업을 순차적으로 실행하는 함수입니다. 모든 작업이 완료될 때까지 최종 함수가 실행되지 않습니다. items 배열은 각 비동기 작업의 매개변수를 저장하고, results 배열은 각 비동기 작업의 실행 결과를 저장합니다.

(2) 병렬 실행: 모든 비동기 작업이 동시에 실행되며 모두 완료될 때까지 최종 기능이 실행되지 않습니다.

//forEach方法会同时发起6个异步任务，等到它们全部完成以后，才会执行final函数。
var items = [ 1, 2, 3, 4, 5, 6 ];
var results = [];

items.forEach(function(item) {
 async(item, function(result){
  results.push(result);
  if(results.length == items.length) {
   final(results);
  }
 })
});

병렬 실행의 장점은 한 번에 하나의 작업만 실행할 수 있는 직렬 실행에 비해 시간이 절약된다는 것입니다. 하지만 문제는 병렬 작업이 많으면 시스템 자원이 고갈되기 쉽고 작업 속도도 느려진다는 점이다. 따라서 세 번째 공정 제어 방법이 있습니다.

(3) 병렬 및 직렬 조합: 임계값을 설정하면 한 번에 최대 n개의 비동기 작업만 병렬로 실행할 수 있습니다. 이렇게 하면 시스템 리소스가 과도하게 사용되는 것을 방지할 수 있습니다.

rreee

위 내용은 자바스크립트 비동기 실행 및 연산 흐름 제어 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!