[JS] setTimeout의 clearTimeout, 디바운싱, 쓰로틀링

clearTimeout

: setTimeout으로 생성한 타이머의 실행을 취소하는 기능

clearTimeout(취소할 타임아웃의 식별자)

 

 

디바운싱

빈번하게 발생하는 이벤트를 '특정 시간 이후에 한번만' 실행 시키는 최적화 기법

 

예를 들어 사용자가 300밀리초 동안 버튼을 5번 클릭 했다고 하면 디바운싱은 클릭에 의한 이벤트 실행이 바로 되지 않는다. 디바운싱 시간이 300밀리초로 설정되어 있다면, 사용자가 클릭을 멈추고 300밀리초가 지나고 나서야 해당 함수가 한번 실행된다. 

 

디바운싱은 성능뿐 아니라 요청 하나하나도 모두 돈인 유료 API를 사용할 때 큰 효과를 볼 수 있다.  디바운싱은 주로 연이어 발생하는 이벤트를 단일 이벤트로 만들고 싶은 곳, 즉 빈번하게 발생하는 타이핑 이벤트의 결과 표시(검색 결과 목록 표시), 블로그 글쓰기 에디터의 자동저장 기능 등에 사용된다고 한다.

 

 

• 실습문제

1. 타이핑 도중에는 alert가 안 일어남
2. 타이핑이 1초 이상 멈출 시 alert가 일어남

let timer;

let inputelement = document.getElementById('inputName');
inputelement.addEventListener('input', function (e) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(function () {alert(`입력된 이름: ${e.target.value}`)}, 1000);
});

- 타이머를 초기화하기 위해 timer을 함수 밖에서 선언

 

 

쓰로틀링(throttling, 조절)

빈번하게 발생하는 이벤트를 '일정한 간격으로 한번만' 실행 시키는 최적화 기법

 

짧은 주기로 실행되는 이벤트를 '조절'하고 싶은 곳에 사용하면 되며 스크롤 이벤트나 마우스 움직임 이벤트와 같은 이벤트가 연속으로 실행 되는 곳 등에 사용된다.

 

• 실습문제

1. 타이핑 도중에는 0.5초마다 숫자가 1 증가
2. 타이핑을 멈추면 숫자가 증가하지 않음.

let timer;
let count = 0;

let inputelement = document.getElementById('inputName');
let score = document.getElementById('score');
inputelement.addEventListener('input', function (e) {
    if (!timer) {
        timer = setTimeout(function () {
            timer = null; // 이렇게 하는 이유는?
            console.log(score);
            score.innerHTML = count++;
            }, 500);
    }
});