이벤트 제어하기!

클릭이나 스크롤 등 어떤 방식으로 이벤트를 동작하도록 할 때

같은 동작을 연속으로 여러번 동작시키도록 하면 쓸데없는 동일한 연산이 여러번 일어나며 성능을 저하 시키고 정말 필요한 다음 작동에 영향을 주게 된다.

이러한 상황을 방지하기 위해 이벤트를 제어하는데

이벤트 제어 방식에

Throttling 과 Debouncing 방식이 있다.

Throttling

Throttling 의 경우 강제로 잠깐동안 같은 동작을 하지 못하도록 한다.

if (!timer) {
    timer = setTimeout(function() {
      timer = null;
      // 실행할 코드 내용
    }, 200);

setTimeout 함수 사용 등을 통해 이벤트 동작 후 몇 초 동안은 같은 이벤트를 동작시키지 못하도록 하여 동일 동작이 과하게 여러번 실행되지 않도록 막는다.

Debouncing

Debouncing은 여러번 동작 시키는 경우 가장 처음 동작 혹은 가장 나중 동작만을 하도록 하고 다른 동작들은 무시하고 건너 뛰도록 한다.

clearTimeout(timer);
  timer = setTimeout(function() {
    // 실행할 코드 내용
  },200)

clearTimeout 함수를 사용하여 여러번 눌러도 기다렸다가 몇 초동안 동일 동작을 시키지 않으면 동작하도록 한다.

차이와 활용

Debouncing 은 이후 동작들을 모두 기다렸다가 실행할 수 있기 때문에 ajax 통신 등에 활용이 좋다.

Throttling 은 바로 동작하고 불필요한 후 동작을 막기 때문에 스크롤이나 슬라이드 동작할 때 활용이 더 좋다.