사용자 ID의 검증을 입력할때마다 결과를 실시간 텍스트로 알려달라는 요청이 있었다. 그냥 스크립트 상에서 검증을 하면 문제가 없었지만, 외부 API를 통해 검증을 해야되서 입력되는 순간마다 API를 호출하면 불필요하게 호출되겠다는 생각이 들어 구현하면서 정리한 내용을 기록해보고자 한다.
❓디바운스
- 이벤트가 일어날때마다 호출하는 것이 아닌 이벤트가 끝나는 마지막 시점에만 이벤트를 호출하는 기법.
- 대표적으로 키보드 입력을 통한 비동기 호출에서 많이 사용. (ex.네이버에서 검색어를 입력하면, 단어를 입력할때마다 추천검색어를 호출하는것이 아닌 마지막에 입력된 단어를 바탕으로 추천 검색어 목록을 보여줌.)
- 대표적인 관련 라이브러리
lodash,underscore라이브러리.(_.debounce(함수,설정할 시간))jquery라이브러리.($.debounce( 설정시간, 호출함수))
⌨ 구현
<input type="text">
<script>
document.querySelector('input').addEventListener('input',e=>{
console.log(e.target.value);
})
</script>
- 텍스트 입력시 내용을 콘솔에 출력하는 소스코드다. "네이버"를 검색하는데, 키보드를 입력할때마다, 콘솔에 결과가 계속 출력되고있다. 아래와 같이 소스코드를 변경해보자.
//...중략
let timer;
document.querySelector('input').addEventListener('input',e=>{
if(timer){
clearTimeout(timer);
}
timerValue = setTimeout(()=>{
console.log(e.target.value);
},500);
})
//...중략
input이벤트 입력시500ms후에 실행하는 타이머를 설정한다.- 타이머 설정 값을 저장하기 위한
timer변수 를 선언하고,timer에 값이 있다면 기존에 설정된 타이머를 해제 시키고, 새로운 타이머를 설정한다.500ms동안 반응이 없다면,input에 입력된 내용을 콘솔에 출력시켜준다.
- ⚡디바운스를 간단하게 구현해보았지만, timer 변수가 전역에 있으면, 여러 이벤트에 디바운스를 적용하려면, 그만큼 많은 timer변수가 많이 선언되기 떄문에 개선을 해보았다.
//...중략
const printConsole = e=>console.log(e.target.value);//디바운스할 함수
const debounce = (callback,time=500)=>{
let timer;
return (...args)=>{
if(timer){
clearTimeout(timer);
}
timer = setTimeout(()=>{
callback.call(this,...args);
},time)
}
}
document.querySelector('input').addEventListener('input',debounce(e=>printConsole(e),1000));
//...중략decounce 함수 설명
1. 내용이 입력될때마다debounce함수가 실행이 된다.debounce함수는 디바운스될 콜백함수와 지연될 시간을 인자로 받는다.
2. 타이머가 실행되고있으면 해제시키고 새로운 타이머를 설정한다.
3. 타이머 콜백함수는debounce콜백함수에this(=window 객체)를 주입하고, 구조 분해 할당한 이벤트 객체 정보(args)를 매개변수로call메소드를 실행한다.
