Throttle & Debounce

🍰 둘 다 JavaScript에서 성능 최적화를 위해 특정 이벤트의 호출 빈도를 제어하는 데 사용됨.

🍴 Throttle

: 이벤트가 연속해서 발생 시, 일정 시간 간격으로 이벤트를 처리함.

• 이벤트가 자주 발생해도 일정 시간마다 한 번씩만 처리됨.

 let waiting = false;
 
function throttle(callback, limit = 200) {

    if (!waiting) { // waiting이 false일 때만 실행
      callback();
      waiting = true;

      setTimeout(() => { // limit초 뒤에 waiting을 false로 변경하는 타이머
        waiting = false;
      }, limit);
    }
}

• 타이머가 돌고 있는 와중에 throttle 함수를 계속 호출해도 waiting이 true니까 나머지는 실행되지 않음
• limit초가 지난 후 waiting이 false값이 되면 다시 if문을 돌면서 callback()을 다시 실행시킴
• 다시 타이머가 돌아가고 반복...

위 함수를 closure로 수정!

const ground = document.querySelector(".ground");

let waiting = false;

function throttle(callback) {
  if (!waiting) {
    callback();
    waiting = true;

    setTimeout(() => {
      waiting = false;
    }, 1000);
  }
}
ground.addEventListener("mousemove", (e) => { // event 객체 전달하면 throttle()의 안쪽 함수의 매개변수로 들어가서
// throttle에서 받아서 쓸 수 있음
  console.log(e);
});

• 함수를 return하는 형식
• throttle()을 실행시킴 => 안쪽 함수가 반환됨 => 안쪽 함수를 실행시켜야 함! throttle(()=>{
  console.log('안녕');})이런 식으로.

그런데 만약 this를 사용해야 할 경우가 생길 시! this는 어떻게 찾아야 하나?

const ground = document.querySelector(".ground");

let waiting = false;

function throttle(callback, limit = 200) {
  let waiting = false;

  return function (e) { // 이 함수가 mousemove에 의해 실행됨 -(2)
  // 이 함수는 본인이 누구에 의해 실행됐는지 알고 있음 -(3)
  	console.log(this); // 이 this는 나를 호출한 대상인 ground임 -(4)
    if (!waiting) {
      callback.call(this, e); // 그래서 call 이용 -(6)
      waiting = true;

      setTimeout(() => {
        waiting = false;
      }, limit);
    }
  };
}

ground.addEventListener('mousemove', throttle(function() { // throttle이 실행됨과 동시에 -(1)
// throttle은 호출한 대상을 모름. 본인이 알아서 실행함. -(5)
	console.log(this);
    }));

🍴 Debounce

: 짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간 경과 후 이벤트 핸들러가 한 번만 호출되도록 함.

const searchInput = document.querySelector('#search-input');
const searchAPI = (query) => {
  // 검색 API 호출 코드
  console.log(`검색어: ${query}`);
};

const debouncedSearch = debounce(searchAPI, 300); 
// searchAPI 함수를 300 밀리초 동안 지연시킴
// 사용자가 300밀리초 이내에 다른 문자 입력 -> 이전 검색 API 호출은 취소되고
// 마지막 입력 문자로만 검색 수행

searchInput.addEventListener('input', (event) => { // 사용자가 입력할 때마다 해당 함수 실행
  const query = event.target.value;
  debouncedSearch(query);
});