Javascript debounce throttle(이벤트 제어)

 

세상은 넓고 다양한 기술은 언제든 빠른 속도로 나오는 것 같습니다!

역시 개발자는 끊임없이 노력하고 공부해야 하나 봅니다..;ㅁ;

 

효과적인 이벤트 제어를 위해 lodash-es 에서 제공하는 2개의 기능을 사용하여 보았습니다.

 

1. debounce : 여러번 클릭(다른 이벤트도 가능)했을 때 마지막 한번 행위가 동작

debounce 함수는 이벤트의 행위를 가장 마지막에 한 행위만 하도록 합니다.

가령, 게시글 등록, 문의사항 수정 등 데이터의 변경에 대한 행위가 딱 한번만 되야하는데...

사용자가 실수로 클릭을 여러번 하게되면 클릭 한 횟수만큼 이벤트가 동작하게 됩니다.(또는 화면 리사이징??)

그 때 사용 할 만한 함수가 debounce 입니다.

사용법은 debounce 함수를 호출하고 원하는 시간값(이벤트가 끝난다음에 동작할 시간)을 주면 됩니다.

let dev = debounce(function (evt) {
  console.log(evt);
}, 1000);  //1000 == 1초
document.getElementById('대상').addEventListener('이벤트', dev);

요렇게 해 주면 클릭을 몇십, 몇백번 하더라도 마지막 클릭한 행동이 1초뒤에 실행되게 됩니다.

 

2. throttle : 여러번 클릭(다른 이벤트도 가능)했을 때 지정된 시간에 마지막 행동이 한번만 실행

throttle 함수는 내가 지정한 시간에 해당 이벤트가 몇번을 동작 했더라도 마지막 한번만 실행되는 것을 의미 합니다.

가령 1초단위로 설정을 한 이벤트가 존재하면, 해당 1초에 이벤트가 만약 동작했다면 마지막 한번만 이벤트가 실행 됩니다. debounce는 마지막 행동에 대해서 이벤트가 제어 된 다면, throttle은 지정된 시간에 의해서 동작하는게 비슷하지만 서로 다른 차이점 입니다.

let dev = throttle(function (evt) {
  console.log(evt);
}, 1000);  //1000 == 1초
document.getElementById('대상').addEventListener('이벤트', dev);

 

사용법도 뭐 거의 비슷 합니다.

Javascript나 Jquery에서 사용하려면 아래처럼 스크립트를 추가 해 주어야 합니다.

<script src="https://cdn.jsdelivr.net/npm/lodash-es@4.17.21/isObject.min.js"></script>

 

SPA의 개발 환경 이라면 역시나 npm 또는 yarn 을 통해서 라이브러리를 추가 해준 다음 import를 해 주면 됩니다.

 * npm install lodash-es

import { debounce, throttle } from 'lodash-es';

 

이미 좋은 포스팅이나 예제가 많이 존재 합니다!

이러한 기능은 브라우저의 리사이징, 데이터의 CRUD 요청 기능에 대해서 중복행위 방지를 위해서는 고려해볼 만한 좋은 기능인 것 같습니다!

이상으로 간단하게 써 본 debounce, throttle에 관한 내용이였습니다. 👻