쓰로틀링(throttling)과 디바운싱(debouncing)

Reason

포트폴리오 리뉴얼 작업을 하는도중 휠(wheel)을 이용한 이벤트의 작업을 하게되었는데, 이때 휠로 발생시키는 이벤트는 순간적으로 여러번 작동하기 때문에 중도에 의도치 않은 작업을 발생시키거나 오류 및 버그를 발생시키게 된다.
이때 이벤트 발생빈도를 제어하기위해 방법을 찾던 중 쓰로틀링 및 디바운싱에 대해 학습하고 적용시키는 기회가 되었다.

---

Study

잦은 이벤트 호출이 일어날 경우에 대해 이벤트 발생빈도를 제어 및 관리

• 쓰로틀링 : 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출하지 않도록 하는 것

• 디바운싱 : 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것

(서버요청, srcoll 이벤트 등에 사용)

---

Use

디바운싱(debouncing)

let timer; //타이머 변수 설정. 타이머가 설정되어있지 않다면 undefined.

/**--skip---*/
 
window.addEventListener("wheel", (e) => {
      if (timer) {//타이머설정이 되어있다면
        clearTimeout(timer);//타이머 해제
      }
      timer = setTimeout(() => {//타이머 설정
        if (e.deltaY > 0) {//작업 내용
          window.scrollBy({ top: window.innerHeight, behavior: "smooth" });
        } else if (e.deltaY < 0) {
          window.scrollBy({ top: -window.innerHeight, behavior: "smooth" });
        }
      }, 300);//setTimeout 타이머 0.3초 설정.
    });

위 코드는 스크롤 이벤트를 예로 작성한 디바운싱 예시이다.

1. 타이머 변수 선언.
2. 이벤트리스너에서 if(timer)를 만날시, 타이머가 이미 작동중이라면 작동중인 타이머를 clearTimeout(timer) 해제(삭제)한다.
   이는 0.3초내에 동일 이벤트를 발생시킬시 이전에 실행되어 작동예정(타이머에 의해)이었던 코드를 무시하고 새로운 코드를 타이머에 등록해 이후에 작동시킨다.
3. 한마디로 0.3초내에 동일 이벤트 발생시 이전 동일이벤트 삭제 & 재등록.

쓰로틀링(throttling)

let timer; //타이머 변수 설정. 타이머가 설정되어있지 않다면 undefined.

/**--skip---*/
 
window.addEventListener("wheel", (e) => {
      if (!timer) {//타이머설정이 되어있않다면
        timer = setTimeout(() => {//타이머 설정
          timer=null;//타이머 설정 null
        console.log(e.deltaY);//작업내용.
      }, 300);
     }
  });

1. 타이머 변수 선언.
2. 타이머가 설정되어 있지 않다면if (!timer), 타이머를 설정한다.
3. 0.3초뒤에 타이머는 설정이 null이 되고, 작업내용이 실행된다.
   이는, 0.3초동안은 중복된 이벤트에 대해 어느 작업도 하지 않는것을 의미한다.

---

Extra

• setTimeout => ?

setTimeout(()=>{
  console.log('hi')// 2. 1000ms 이후에 실행될 코드;
},1000);// 1. 타이머 내부에 작성한 코드가 1000ms 뒤에 실행된다.

몇초 뒤에 실행되었으면 하는 코드를 작성할 때 사용.

---

Conclusion

쓰로틀링과 디바운싱의 차이

• 쓰로틀링 : 최소 몇 ms에 마다 한번 실행되는지 설정.
• 디바운싱 : 연속적인 동일한 이벤트 호출이 끝날때까지 대기. 마지막 이벤트 실행.