Javascript/ES5 & ES6

debounce/throttle (lodash)

덕구공 2022. 10. 26. 14:26

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>