Debounce
- 이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술이다.즉, 순차적 호출을 하나의 그룹으로 "그룹화"할 수 있다
- 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것이다
<body>
<h2>디바운싱 전</h2>
<input type="text" id="input01">
<h2>디바운싱 후</h2>
<input type="text" id="input02">
<h2>디바운싱 후(방법2)</h2>
<input type="text" id="input03">
</body>// 디바운싱 전
document.querySelector('#input01').addEventListener('input', function(e) {
console.log('[ 전 ] input value? ', e.target.value);
});// 제로초님 방법으로 디바운싱
// https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa
let timer;
document.querySelector('#input02').addEventListener('input', function(e) {
if (timer) { // 변화가 생겼을때 timer에 값이 존재한다면 그 값으로 타이머를 멈추고 , 새로운 타이머를 걸어준다
console.log(timer)
clearTimeout(timer);
}
timer = setTimeout(function() {
console.log('[ 후 ] input value ? ', e.target.value);
}, 1000);
});// 외국 블로거 방법으로 디바운싱
// https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf
const debounce = (func, delay) => {
let inDebounce;
return function() {
const context = this
const args = arguments
clearTimeout(inDebounce)
inDebounce = setTimeout(() => func.apply(context, args), delay)
// 반환되는 timeoutID는 숫자이고, setTimeout()을 호출하여 만들어진 타이머를 식별할 수 있는 0이 아닌 값 이다
// 이 값을 clearTimeout()에 전달하면 타이머가 취소된다
}
}
document.querySelector('#input03').addEventListener('input', debounce(function(e) {
print(e);
}, 1000));
function print(e) {
console.log('[ 디바운싱 2번째 방법 ] input value? ', e.target.value);
}HTMLElement: input event
<input>, <select> 또는 <textarea> 요소의 값이 변경되면 입력 이벤트가 발생한다
참고 블로그
👩🏻💻 🚀