자바스크립트 jQuery Deferred() 비동기처리 하기

비동기를 사용하는 이유

• 자바스크립트는 싱글 스레드 언어이다. 한번에 한가지일을 순차적으로 처리한다.
• 그러나, 웹은 방대한 자료를 가져오고, 효율적으로 사용하기 위해서 비동기적 프로그래밍이 필요하다

 

jQuery Deferred를 이용하여 비동기 함수 만드는 방법

Deferred() 비동기 함수로 만드려면 3가지 정도 과정이 필요하다.

 

1. Deferred() 객체 생성

var $dfd = $.Deferred();

2. 프로미스 객체 return

return $dfd.promise();

3. 비동기 함수 실행

setTimeout(function() {
	console.log('async');
}, 300)

 

위 3가지 함수를 사용하면 아래와 같이 비동기로 사용할 수 있는 함수가 생기게 됩니다.

function work() {
  var $dfd = $.Deferred();
  
  setTimeout(function() {
    $dfd.resolve();
  }, 300)
  
  return $dfd.promise();
}

work().done(function() {
  console.log('퇴근');
});

 

비동기 함수 2개 이상이면 어떻게 처리 할 수 있을까요?

 

jQuery When을 사용하여 병렬 처리를 할 수 있다.

비동기 함수1, 비동기함수 2를 모두 실행하고 done을 사용할 수 있습니다.

 

아래와 같이

1. lunch() 실행
2. work() 실행
3. 모든 비동기 함수가 완료 된 이후에 done 함수를 실행하는 것을 확인할 수 있다.

$.when(lunch(), work()).done(function() {
  console.log('go home');
});

function lunch() {
  var $dfd = $.Deferred();
  
  setTimeout(function() {
    console.log('lunch complete');
    $dfd.resolve();
  }, 300);
  
  return $dfd.resolve();
}

function work() {
  var $dfd = $.Deferred();
  
  setTimeout(function() {
    console.log('work complete');
    $dfd.resolve();
  }, 1000)
  
  return $dfd.promise();
}