debounce/throttle (lodash)Javascript/ES5 & ES62022. 10. 26. 14:26
Table of Contents
debounce?
- debounce란 연속되는 함수의 호출(이벤트 리스너) 흐름 속에서 마지막 함수 호출(or 처음)만 일어나게 하는 것이다!
throttle?
- throttle이란 일정한 주기마다 함수(이벤트 리스너)를 한번만 실행시키는 것이다
debounce와 throttle이 없을 때
- debouce와 throttle 없이 평소처럼 input, resize, scroll 같이 이벤트 핸들러가 굉장히 짧은 주기로 실행되는 이벤트를 사용하면 저하를 불러올 수 있다!
- 예를 들어, 어떠한 요소의 input/scroll/resize 이벤트의 이벤트 핸들러를 통해 가장 마지막 시점의 정보만 필요하다면 그 이전의 정보는 모두 필요 없게 되고 이러한 경우 debounce를 사용하면 쉽게 맨 마지막 시점의 정보만 얻을 수 있다!
- 반대로 debounce와 throttle이 없다면 불필요한 이벤트 핸들러가 계속 실행되는 것이다!
- 아래 예시는 debounce와 thorttle을 사용하지 않고 window를 resize 시키고 이벤트 핸들러가 실행될 때마다 a가 1씩 증가되는 예시이다!
<!DOCTYPE html>
<html lang="en">
<head>
<title>debounce and throttle</title>
</head>
<script>
var a = 0;
window.addEventListener('resize', () => {
a++;
console.log(a)
})
</script>
<body>
<div>no debounce and throttle</div>
</body>
</html>- window가 resize가 될 때마다 1씩 증가하는 모습을 보인다!
lodash로 debounce 쉽게 쓰기
- lodash에서 debounce는 아래처럼 굉장히 쉽게 쓸 수 있다!
- 아래처럼 debounce를 하나 만들어서 이벤트 핸들러에 할당할 수 있다!
- 어떠한 이벤트가 끝날 때 파라미터로 넘긴 시간이 경과하고 콜백함수가 딱 한번 실행된다
_.debounce(콜백함수, 시간}- 아래 예시를 통해 좀 더 자세히 살펴보자!
<!DOCTYPE html>
<html lang="en">
<head>
<title>debounce and throttle</title>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>
</head>
<script>
var a = 0;
const debounceHandler = _.debounce(() => {
a++;
console.log(a)
}, 300)
window.addEventListener('resize', debounceHandler);
</script>
<body>
<div>debounce!</div>
</body>
</html>- resize 이벤트가 끝날 때만 이벤트 핸들러가 실행되어서 a가 1씩 증가한다! debounce를 사용하지 않은 이벤트 핸들러와 엄청난 차이를 보여준다!
lodash로 throttle 쉽게 쓰기
- 사용법은 debounce와 같이 매우 간단하다.
- 어떠한 이벤트가 실행되고 이벤트 핸들러가 바로 실행되고 끝날 때 까지 파라미터로 넘긴 시간 만큼마다 콜백함수가 반복해서 실행된다!
- 이벤트가 끝나도 마지막 한번 실행될 수 있다!
_.throttle(콜백함수, 시간}
<!DOCTYPE html>
<html lang="en">
<head>
<title>debounce and throttle</title>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>
</head>
<script>
var a = 0;
const throttleHandler = _.throttle(() => {
a++;
console.log(a)
}, 300)
window.addEventListener('resize', throttleHandler);
</script>
<body>
<div>throttle!</div>
</body>
</html>
'Javascript > ES5 & ES6' 카테고리의 다른 글
| This, 리액트에서의 bind() (0) | 2021.07.15 |
|---|---|
| 빽틱 ` (0) | 2021.07.11 |
| Scope, =, 삼항연산자 (0) | 2021.07.07 |
| async/await (0) | 2021.06.04 |
| 비동기 패턴 - 콜백, Promise (0) | 2021.06.04 |
@덕구공 :: Duck9s'
주니어 개발자에욤
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!