디바운싱과 쓰로틀링
디바운스와 쓰로틀링 모두 웹에서 발생하는 이벤트를 제어하는 방법이다.
(1) 디바운싱(debouncing)
함수 실행 요청이 연속적으로 들어온 경우 가장 마지막 요청만 수행함
📍(예시 코드) setTimeout 사용하여 디바운싱 구현하기
1. 타이핑 도중에는 alert가 안 일어남
2. 타이핑이 1초 이상 멈출 시, alert가 일어남.
먼저, input 박스 요소를 가져오고, 해당 요소에 "input" 이벤트 등록함. "input"이벤트는 input 박스에 값이 수정될 때마다 발생하는 이벤트
const nameElem = document.querySelector("#inputName");
nameElem.addEventListener("input", alertWhenTypingStops);🐝 참고 : input 이벤트는 요소의 value가 변할 때마다 발생!
change 이벤트는 엔터 키를 누르거나 리스트에서 옵션을 선택하는 등 변경점을 '반영'해야 발생한다는 점에서 다르다.
그리고 이벤트 리스너를 등록할 함수 정의. 해당 함수 내에서는 setTimeout을 이용해 1초 뒤 경고창 출력
setTimeout(() => alert(`입력된 이름 : ${name}), 1000)하지만 이렇게만 작성 시, input의 변화가 있을 때마다, 즉 한 글자를 입력할 때마다 경고창 출력됨. 따라서 setTimeout으로 설정하는 타이머를 하나 만들어 관리 해야함. alertTimer라는 변수를 밖에서 하나 선언.
let alertTimer;그리고 setTimeout을 실행하는 타이머를 이 변수에 저장할 수 있다.
alertTimer = setTimeout(() => alert(`입력된 이름: ${name}), 1000);그래서 함수가 호출되고, 타이머가 비어있지 않다면 clearTimeout을 이용해 앞선 타이머를 초기화함. 그렇지 않으면 수정이 발생할때마다 alert창이 나타나게 됨.
if(alertTimer){
clearTimeout(alertTimer)
}해당 조건을 통해 마지막 수정이 끝나고, 등록된 하나의 타이머만 초기화되지 않고 1초 뒤에 실행되어 디바운싱이 구현됨. 타이머를 초기화하는 과정에서 alertTimer변수를 함수 안에서 선언하면 이벤트가 발생할 때마다 변수가 새로 초기화되기 때문에, 함수 밖에서 선언해야만 함.
(2) 쓰로틀링(throttle)
함수 실행 요청이 연속적으로 들어온 경우 현재 실행하고 있는 함수가 없는 경우에만 함수 실행 요청 수행. 조건이 지속적으로 만족될 때에는 효과(점수 증가, api 요청 등)가 주기적으로 발생하다가, 멈출 시(조건 불만족) 효과가 멈추는 것
📍(예시 코드) setTimeout 사용하여 쓰로틀링 구현하기
1. 타이핑 도중에는 0.5초마다 숫자가 1 증가함.
2. 타이핑을 멈추면, 숫자가 증가하지 않음.
input 박스에 입력 값의 변화가 있을 때마다 1점씩 추가하되, 매 수정마다 점수가 오르는 것이 아닌 0.5초 동안 1점만 추가하는 조건의 코드 구현.
우선, input 박스의 요소 가져와 값이 수정되면 발생하는 "input" "input" 이벤트 등록함.
const nameElem = document.querySelector("#inputName");
nameElem.addEventListener("input", increaseScoreDuringTyping);다음으로 이벤트 리스너에 등록한 함수 작성.
해당 함수는 HTML 요소에서 querySelector로 #score를 가져와 0.5초 뒤 1점 증가.
setTimeout(() => {
const score = document.querySelector("#score");
const newScore = parseInt(score.innerText) + 1;
score.innerText = newScore;
}, 500)
단, 0.5초 동안 단 한번만 점수가 올라가야하므로 isInThrottle 이라는 변수를 함수 밖에서 생성해 쓰르톨링으로 구현.
let isInThrottle;이벤트 함수 안에서 isInThrottle 함수를 검사하여, 해당 함수가 true라면 별다른 동작을 하지 않고 함수를 종료 시킨다. 그리고 맨 처음 실행될 때 isInThrottle은 true로 설정해준다.
if(isInTrottle){
return;
}
isInTrottle = true;그리고 점수를 설정하는 타이머 안에서 0.5초 뒤 타이머가 실행될 때 isInThrottle 변수를 다시 false로 바꿔준다. 이렇게하면 처음 이벤트 함수가 실행될 때만 해당 타이머가 작동하고, 그 외에는 모두 취소되어 0.5간 1점씩 증가하는 조건에 맞추어 동작하기 때문.
setTimeout(() => {
const score = document.querySelector("#score");
const newScore = parseInt(score.innerText) + 1;
score.innerText = newScore;
isInThrottle = false;
}, 500);