사용자가 키를 누를 때마다가 아니라 입력을 마쳤을 때 JavaScript 함수를 실행하고 싶다면, 일정 시간 동안 추가 입력이 없을 때만 함수가 호출되도록 만드는 '디바운스(debounce)' 기법을 활용하면 됩니다.
핵심 아이디어는 간단합니다. 키 입력 이벤트가 발생할 때마다 기존에 설정된 타이머를 초기화하고 새 타이머를 다시 설정하는 것입니다. 그 결과, 사용자가 마지막으로 키를 누른 후 지정한 시간(예: 1초) 동안 입력이 멈추면 비로소 원하는 함수가 실행됩니다.
예제 코드
<html>
<body>
<script>
var timer = null;
$("#myText").keydown(function(){
clearTimeout(timer);
timer = setTimeout(doStuff, 1000)
});
function doStuff() {
alert("Write more!");
}
</script>
<input type = "text" id = "myText" />
</body>
</html>
코드 설명
keydown이벤트가 발생할 때마다clearTimeout(timer)로 이전에 설정된 타이머를 제거합니다.setTimeout(doStuff, 1000)으로 1초(1000밀리초) 뒤에doStuff함수가 실행되도록 새 타이머를 설정합니다.- 사용자가 계속 입력하는 동안에는 타이머가 반복적으로 초기화되고, 마지막 입력 후 1초가 지나야
doStuff()가 호출됩니다. - 이 예제에서는 단순히 알림창("Write more!")을 띄우지만, 실제로는 AJAX 요청 전송, 검색어 자동완성 처리, 유효성 검사 등 원하는 작업을 수행하도록 확장할 수 있습니다.
참고로 위 예제는 jQuery를 사용하므로 페이지에 jQuery 라이브러리가 포함되어 있어야 합니다. 순수 JavaScript로 구현하려면 addEventListener('input', ...) 방식으로 동일한 로직을 적용하면 됩니다.