React ES6 (5) - 비동기 함수, 디바운스 & 스로틀

비동기 함수

• 비동기 처리를 위해 사용함
• 비동기 처리란? 
  • 작업 시간이 긴 A를 처리하느라 다른 작업들이 대기하고 있다면 다른 작업들을 먼저 진행하고 작업 A와 A와 연관된 작업을 이후에 처리하는 방식
  • ex) 서버에 데이터를 요청하고 결과를 기다리는 과정

 

• 기존 자바스크립트의 비동기 함수 처리
  • 지연 작업이 필요한 함수에 setTimeout() 함수를 이용했음
  • 지연 작업이 완료되고나면 실행되어야 하는 함수는 지연 작업 함수의 인자인 콜백 함수로 전달하여 처리했음
• 예시 :

  function do1(a) {
      setTimeout(() => a('작업 A'), 100);
  }
  
  function do2(b) {
      setTimeout(() => b('작업 B'), 200);
  }
  
  function do3(c) {
      setTimeout(() => c('작업 C'), 300);
  }
  
  function do4() {
      console.log('빠른 작업');
  }
  
  do1(function (message1) {
      console.log(message1);
      do2(function (message2) {
          console.log(message2);
          do3(function (message3) {
              console.log(message3);
          });
      });
  });
  do4();​

• 결과 :

└ 콜백 함수가 총 3개의 계단 모양으로 되어있는데 이러한 형태를 콜백 지옥(callback hell)이라고 부름
└ do4() 함수는 지연 작업 완료 시간을 기다리지 않고 바로 실행됨 
        └ 100ms 후에 do1() 함수가 실행됨
            └ 200ms 후에 do2() 함수가 실행됨
                └ 300ms 후에 do3() 함수가 실행됨

 

---

 

• ES6의 비동기 함수 처리 :
  • Promise 클래스를 이용함
  • 참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise
  • Promise 객체를 생성할 때는 resolve() 함수 또는 reject() 함수에 해당하는 콜백 함수를 직접 전달해야 함
    • ex) const do1 = () =>
                new Promise((resolve) => {
                    setTimeout(() => resolve('작업 A'), 100);
  • resolve() 함수는 이후에 then() 함수에 인자로 전달할 callback 함수와 일치함
  • 기존 자바스크립트로 만든 것과의 차이는 콜백 지옥(callback hell)이 없어졌다

 

• 예시 :

  const do1 = () =>
  new Promise(resolve => {
      setTimeout(() => resolve('작업 1'), 100);
  });
  const do2 = () =>
  new Promise(resolve => {
      setTimeout(() => resolve('작업 2'), 200);
  });
  const do3 = () =>
  new Promise(resolve => {
      setTimeout(() => resolve('작업 3'), 300);
  });
  
  function do4() {
      console.log('작업 4');
  }
  
  const nextDo = (msg1) => {
      console.log(msg1);
      return do2();
  };
  
  do1()
      .then(nextDo)
      .then((msg2) => {
          console.log(msg2);
          return do3();
      })
      .then((msg3) => {
          console.log(msg3);
      });
  do4();​

• 결과 :

 

---

디바운스와 스로틀은 ES6의 문법은 아님
But, 지연처리를 효과적으로 구현할 수 있음

디바운스

• 디바운스 :
  • 어떤 내용을 입력하다가 특정시간 동안 대기하고 있으면 마지막에 입력된 내용을 바탕으로 서버 요청을 하는 방법
  • ex) 연관 검색어

 

 

• 디바운스를 코드로 구현 :

  function debounce(func, delay) {
      let deb;
      return function(...args) {
          if(deb) {
              clearTimeout(deb);
          }
          deb = setTimeout(
          () => func(...args),
          delay);
      }
  }
  
  const run = debounce(val => console.log(val), 200);
  
  run('a');
  run('b');
  run(10);

• 결과 :

└ 200ms 안에 run() 함수를 호출하지 않으면 가장 마지막으로 호출된 run() 함수만 실행이되므로
    200ms 이후에 10이 출력됨
    *func 인자 : 서버 요청
    *delay 인자 : 지연 시간

 

---

스로틀

• 스로틀 : 
  • 입력되는 동안에도 바로 이전에 요청한 작업을 주기적으로 실행함
  • ex) 페이스북의 타임라인에서 스크롤을 내리는 동안 계속해서 다음 내용이 출력됨

 

 

• 스로틀을 코드로 구현 :

  function throttle(func, delay) {
      let lastA;
      let lastB;
      return function(...args) {
          const context = this;
          
          if(!lastB) {
              func.call(context, ...args);
              lastB = Date.now();
          } 
          else {
              if(lastA) clearTimeout(lastA);
              lastA = setTimeout(function() {
                  if((Date.now() - lastB) >= delay) {
                      func.call(context, ...args);
                      lastB = Date.now();
                  }
              }, delay - (Date.now() - lastB));
          }
      }
  }
  
  var check = () => {
      const offset = 500;
      const current = window.pageYOffset;
      const bottom = document.body.offsetHeight - window.innerHeight - offset;
      
      if(current >= bottom) {
          console.log('다음 페이지');
      }
  };
  
  var infinite = throttle(check, 300);
  window.addEventListener('scroll', infinite);

• 결과 :

  

  

  └ 스크롤을 내리게 되면 스크롤이 움직이는 동안 '다음 페이지'가 주기적으로 출력됨
      func : 스크롤이 이동할 때 호출되는 서버 요청
      delay : 호출 생략 시간
      함수를 실행하는 요청이 오면 setTimeout() 함수를 실행하고,
      지연 시간을 계산하여 이 값이 delay보다 커야만 func() 함수를 실행함