JavaScript_javascript 기술의 다중 동시성 문제를 처리하는 방법

코드를 작성할 때 이런 시나리오를 자주 접합니다. 페이지가 초기화될 때 로딩 페이지가 표시되고, 데이터를 얻기 위해 여러 개의 ajax 동시 요청이 시작되고, 각 ajax 요청이 반환될 때 로딩이 종료됩니다.

예를 들어 주문 페이지에서는 공통 주소 정보, 제품 정보, 도시 정보 등을 쿼리해야 하며 이러한 요청은 모든 데이터가 로드될 때까지 사용자가 작동할 수 없기를 바랍니다. .

이 시나리오를 구현할 때 직면하기 쉬운 문제는 다중 동시성을 어떻게 제어할 것인가입니다. 몇 가지 솔루션과 아이디어는 다음과 같습니다.

병렬이 직렬로 변경

비즈니스 로직 자체는 직렬인데, 제공되는 요청 방식이 비동기라면 이 방식을 고려해 볼 수 있습니다.
하지만 이 시나리오에서는 그렇지 않습니다. 이렇게 하면 페이지 성능이 크게 저하되고 로딩 속도가 길어집니다.

콜백

동시 횟수가 적은 상황에만 적합합니다. 여러 수준의 중첩된 콜백은 코드의 가독성을 크게 떨어뜨립니다.

function async1(){
  //do sth...
}
function async2(){
  //do sth...
  async1();
}
async2();

ajax가 동기화로 변경되었습니다

jquery에서 비동기 매개변수를 false로 설정

$.ajax({
  url:"/jquery/test1.txt",
  async:false
});

종료 플래그 설정

더 간단한 접근 방식은 비동기 함수가 완료될 때마다 1씩 증가하는 카운터를 설정하거나, 배열을 설정하고 비동기 함수가 실행될 때마다 배열을 업데이트하는 것입니다.

콜백 횟수

var cnt = 0;
function async1(){
  //do sth...
  callback();
}
function async2(){
  //do sth...
  callback();
}
function callback(){
  cnt++;
  if(2==cnt) console.log('都已执行完毕');
}

루프 차단됨

var cnt = 0;
function async1(){
  //do sth...
  cnt++;
}
function async2(){
  //do sth...
  cnt++;
}
while(2>cnt){}

루프 논블로킹

성능에 영향을 주지 않도록 너무 많이 사용하는 것은 권장하지 않습니다

var cnt = 0;
function async1(){
  //do sth...
  cnt++;
}
function async2(){
  //do sth...
  cnt++;
}
var interval = setInterval(function(){
  if(2===cnt){
    console.log('已执行完成');
    clearInterval(interval)
  }
}

타사 프레임워크 구현

jquery

현재 프로젝트에서 사용하는 접근 방식

var d1 = $.Deferred();
var d2 = $.Deferred();
function async1(){
  d1.resolve( "Fish" );
}
function async2(){
  d2.resolve( "Pizza" );
}
$.when( d1, d2 ).done(function ( v1, v2 ) {
  console.log( v1 + v2 + '已完成');
});

위 내용은 JavaScript에서 다중 동시성 문제를 처리하는 방법에 대해 편집자가 소개한 관련 지식입니다.