[JavaScript] Throttling&Debouncing

throttling ?

특정 동작을 일정한 시간 간격으로 한번만 실행하도록 하는 기술

쓰로틀링은 이벤트 핸들러의 호출을 제한하여 성능을 향상시키는 데 사용

throttling 사용이유

• 성능향상 : 특정 동작이 너무 자주 발생할 경우, 해당 동작을 쓰로틀링함으로써 브라우저의 성능을 향상시킬 수 있습니다. 스크롤 또는 리사이징 이벤트와 같이 고빈도로 발생하는 이벤트를 처리할 때 쓰로틀링이 유용합니다.
• UX 향상 : 너무 자주 발생하는 이벤트의 처리를 쓰로틀링하여 사용자 경험을 향상시킬 수 있습니다.예를 들어, 스크롤 이벤트를 쓰로틀링하여 스크롤 시 발생하는 비용이 큰 작업을 줄이고 부드러운 스크롤 경험을 제공할 수 있습니다.
• 리소스 감소 : 쓰로틀링을 사용하면 일정한 시간 동안에 함수가 호출되는 빈도를 제어할 수 있으므로, 이를 통해 네트워크 요청이나 연산량이 많은 작업과 같은 리소스 집약적인 작업의 빈도를 줄일 수 있습니다.

throttling 구현 코드

• throttling 적용 전 ⇒ 스크롤을 할 때마다 콘솔 출력

window.addEventListener("scroll", ()=> console.log("스크롤 발생");

• throttling 적용 후 ⇒ 스크롤시 1초마다 한번씩만 console이 출력되도록 최적화

// 클로저를 이용해 timer 변수 사용
function throttling(cb, time) {
	let timer;
	return function(...args) {
	// timer가 존재한다면 함수 종료
	if(timer) {
		return;
	}

	timer = setTimeout(()=>{
			cb.apply(this, args);
			// 다음 타이머 적용을 위해 timer 초기화
			timer = null;
		}, time);
	}
}

const throttledScroll = throttling(() => console.log("스크롤 발생"), 1000);

window.addEventListener("scroll", throttledScroll);

debuncing ?

연이어 발생하는 이벤트를 무시하고 일정 시간이 지난 후에 한 번만 이벤트를 실행하도록 하는 기술

주로 사용자 입력에 반응하는 이벤트(예: 키보드 입력, 마우스 이동 등)을 처리할 때 유용하게 쓰입니다.

debuncing사용 이유

• 성능 개선 : 디바운스를 사용하면 연속적으로 발생하는 이벤트를 무시하기 때문에 성능을 개선할 수 있습니다. 특히 사용자 입력과 같이 빈번하게 발생하는 이벤트를 다룰 때, 디바운스 처리하면 불필요한 연산을 줄일 수 있습니다.
• 네트워크 요청 제어 : 사용자의 입력에 따라 네트워크 요청을 보내는 경우에, 디바운스를 사용하여 사용자 입력이 멈춘 후에 한 번의 요청을 보내는 방식으로 네트워크 요청을 제어할 수 있습니다. 이를 통해 서버에 대한 부하를 줄이고, 네트워크 트래픽을 최적화할 수 있습니다.
• 인터페이스 반응성 향상 : 사용자 입력에 반응하는 UI 요소(예: 검색창, 자동완성 기능 등)에서 디바운스를 사용하면 사용자가 입력하는 동안에도 부드러운 인터페이스 반응성을 제공할 수 있습니다. 사용자가 입력을 멈춘 후에만 요청을 처리하므로, 입력 중에 불필요한 갱신이나 처리를 방지할 수 있습니다.
• 이벤트 핸들링 제어 : 디바운스를 사용하면 이벤트 핸들러의 호출 빈도를 제어할 수 있습니다. 특히 이벤트 리스너가 빈번하게 호출될 경우에는 디바운스를 적용하여 호출 빈도를 줄여서 성능을 향상시킬 수 있습니다.

debuncing 구현 코드

• debouncing 적용 전 ⇒ 검색 input에 입력할 때마다 콘솔 출력

const $SearchBar = document.getElementById("searchBar");

const search = (e) => {
	const value = e.target.value;
  console.log(value);
};

$SearchBar.addEventListener("input", (e) => search(e));

• debuncint 적용 후 ⇒ 검색 input에 0.5초 동안 입력이 없을 때 콘솔 출력

const $SearchBar = document.getElementById("searchBar");

function debounce(cb, time) {
      let timer;
      return function (...args) {
        clearTimeout(timer);
        timer = setTimeout(() => {
          cb.apply(this, args);
        }, time);
      };
    }

const search = debounce((value) => console.log(value), 500);

$SearchBar.addEventListener("input", (e) => search(e.target.value));

loadsh 라이브러리 활용하기

loadsh 라이브러리는 throttling과 debuncing이 구현되어있어 loadsh 라이브러리를 활용하면 throttling과 debouncing 함수를 구현하지 않아도 쉽게 사용할 수 있습니다.

loadsh 설치

npm install loadsh

loadsh 라이브러리 사용

import { throttle } from "./loadsh"

const throttledScroll = throttle(() => console.log("스크롤 발생"), 1000);

window.addEventListener("scroll", throttledScroll);

import { debounce } from "./loadsh"

const $SearchBar = document.getElementById("searchBar");

const search = debounce((value) => console.log(value), 500);

$SearchBar.addEventListener("input", (e) => search(e.target.value));