[JS Deep Dive] 41장 - 타이머

1. 호출스케일링

함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용하면 된다. 

자바스크립트는 타이머를 생성할 수 있는 함수와 제거할 수 있는 함수를 제공한다. 

 

타이머 함수는 호스트 객체다 !

호스트 객체라는 것은 
타이머 함수가 JavaScript 자체에서 제공하는 것이 아니라,
JavaScript가 실행되는 환경(브라우저 또는 Node.js)이 제공하는 기능이라는 의미이다. 

 

2. 타이머 함수

2-1. setTimeout 

두번째 인수로 전달받은 시간으로 단 한 번 동작하는 타이머를 생성

-이후 타이머가 만료되면 첫 번째 인수로 전달받은 콜백 함수 호출

-생성된 타이머를 식별할 수 있는 고유한 타이머 Id 반환한다. 

setTimeout 함수가 반환한 id 는 브라우저 환경인 숫자, Node.js 환경이면  객체다 ! 

-setTimeout 함수의 콜백함수는 두 번째 인수로 전달받은 시간 이후 단 한 번 실행되도록 호출 스케일링 된다.

const timeoutId= setTimeout(func|code[,delay,param1, param2 ...);

setTimeout (() => console.log('hi!'),1000);
// 1초 타이머가 만료되면 콜백함수 호출

setTimeout(name=> console.log(`hi! ${name}.`),1000,'Lee');
// 타이머가 만료되면 콜백함수 호출
// 이때 콜백 함수에 'Lee' 가 인수로 전달되는 것이당..

 

2-2. clearTimeout 

함수 호출 스케일링을 취소한다. 

clearTimeout(timerId);
//타이머가 취소되면 timeout 함수의 콜백함수가 실행되지 않는다.

 

2-3. setinterval / clearInterval

setInterval 함수는 두번째 인수로 전달받은 시간으로 반복 동작하는 타이머를 생성한다. 

두번째 인수로 전달받은 시간으로 반복 동작하는 타이머를 생성한다. 

 

타이머가 만료될 때마다 첫번째 인수로 전달받은 콜백함수가 반복호출된다. 

타이머가 취소될 때까지 계속됨 !!!

 

setInteral 함수가 반환한 타이머 id 를 clearInterval 함수의 인수로 전달하여 타이머 취소할 수 있음

let count = 1;

const timeoutId = setInterval(() => {
	console.log(count);
    // 1 2 3 4 5
    if (count++ === 5) clearInterval(timeoutId);
},1000);
	// count가 5이면 setInterval 함수가 반환한 타이머 Id 를 clearInterval 함수의
    // 인수로 전달하여 타이머 취소한다. 
    // 타이머가 취소되면 setInterval 함수의 콜백함수가 실행되지 않음...

 

 

3. 디바운스와 스로틀

디바운스는 "마지막" 이벤트 실행에 적합하고, 쓰로틀은 "정기적인" 실행에 적합하다. 

 

3-1. 디바운스

짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 호출하지 않다가 

일정시간이 경과한 이후에 이벤트 핸들러가 한 번만 호출되도록 함

 

짧은 시간 연속해서 발생하는 이벤트를 그룹화해서 과도한 이벤트 핸들러의 호출을 방지한다. 

 

 

즉 특정 이벤트가 연속적으로 발생할 때, 마지막 이벤트만 실행되도록 제한하는 기술
예를 들어, 사용자가 입력 필드에 타이핑을 계속할 때, 입력이 끝난 후에만 특정 로직을 실행하고 싶을 때 사용한다. 

 

디바운스의 원리

1. 이벤트가 발생할 때마다 타이머를 설정.
2. 기존 타이머가 있으면 취소하고 새로 설정.
3. 타이머가 완료되었을 때만 지정된 함수 실행.

const input = document.getElementById('searchInput');

function search(value) {
  console.log('검색어:', value);
}

// 디바운스 함수 적용
const debouncedSearch = debounce((e) => search(e.target.value), 300);

// 입력 이벤트에 디바운스 적용
input.addEventListener('input', debouncedSearch);

 

사용자가 input에 타이핑할 때마다 search 함수는 호출되지 않고, 입력이 멈춘 후 300ms 후에만 호출된다. 

 

3-2. 스로틀 

짧은 시간 간격으로 이벤트가 연속해서 발생하더라도 일정 시간 간격으로 이벤트 핸들러가 최대 한 번만 호출되도록 한다. 

짧은 시간 연속해서 발생하는 이벤트를 그룹화해서 일정시간 단위로 이벤트 핸들러가 호출되도록 호출주기를 만든다. 

쓰로틀(Throttle)**은 연속적으로 발생하는 이벤트를 일정 간격마다 한 번씩만 실행되도록 제한하는 기술이야.

예를 들어, 사용자가 페이지를 스크롤할 때 과도한 이벤트 호출을 막고, 지정된 시간 간격으로만 함수를 실행하고 싶을 때 사용

 

function throttle(func, limit) {
  let lastFunc;
  let lastRan;

  return function (...args) {
    const context = this;
    const now = Date.now();

    if (!lastRan) {
      // 처음 실행
      func.apply(context, args);
      lastRan = now;
    } else {
      // 지정된 시간 이후 실행
      clearTimeout(lastFunc);
      lastFunc = setTimeout(() => {
        if (now - lastRan >= limit) {
          func.apply(context, args);
          lastRan = now;
        }
      }, limit - (now - lastRan));
    }
  };
}

 

function onResize() {
  console.log('창 크기 변경 이벤트 실행:', window.innerWidth, window.innerHeight);
}

// 쓰로틀 함수 적용
const throttledResize = throttle(onResize, 200);

window.addEventListener('resize', throttledResize);

 

쓰로틀은 과도한 이벤트 호출을 방지하면서도 일정 간격으로 실행해야 하는 작업에 적합
스크롤, 윈도우 리사이즈, 마우스 이동과 같은 고빈도 이벤트에 사용하면 성능을 최적화할 수 있다. 

따라서 scroll 이벤트 처리나 무한스크롤 ui 구현등에 유용하게 사용할 수 있다.