자바스크립트 이벤트 제어 방법 / debounce, throttle

이벤트 제어 방법

- debounce

- throttle

* 과도한 이벤트 발생 시 성능 저하

---

디바운스 debounce

- 연속하여 발생한 이벤트를 그룹화

-> 연속하여 발생한 이벤트 중 마지막 또는 처음 이벤트만 호출

 

ex)

<input type="text" onkeyup="debounce();">

<script>
	var timer;
	function debounce(event) {
		if(timer) clearTimeout(timer);
			timer = setTimeout(() => {
			console.log('Debounce ::: ' + timer);
		}, 100);
	}
</script>

만약 빠른시간에 input영역에 타이핑을 한다고 했을 때 입력한 값을0.1마다 기록한다.

- 0.1초에 5번의 타이핑을 하게 되면 5번이 아닌 1번으로 기록된다.

---

스로틀 throttle

- 연속하여 발생한 이벤트를 그룹화

-> 연속하여 발생한 이벤트 중 정해진 시간 동안 무조건 한번 이벤트 발생

<input type="text" onkeyup="throttle();">

<script>
	var timer;
	function throttle(e) {
		if(!timer) {
			timer = setTimeout(() => {
			    console.log('Throttle ::: ' + timer);
			}, 5000);
		}
	}
</script>

위 코드로 보면 5초동안 연속된 이벤트가 발생되어도 한번만 console이 나오는걸 볼 수 있다.