js 타이머

호출 스케줄링

일정 시간이 경과된 이후에 호출되도록 함수를 예약하는 것. JS는 타이머함수 setTimeout과 setInterval, 타이머를 제거할수있는 clearTimeout과 clearInterval을 제공한다. 타이머 함수는 호스트객체다.

JS는 하나의 실행컨텍스트를 갖기때문에, 두가지 이상의 일을 동시에 처리할수없다(싱글스레드)
따라서 타이머함수는 비동기 방식으로 동작한다.

 

setTimeout

n 초뒤 콜백함수를 실행한다.

setTimeout(item => console.log(`print ${item}`),1000, 'nintendo');
// 1초뒤 'print nintendo' 출력. 콜백함수, 만료시간, 콜백에 넘길 인자 순

setTimeout은 1초뒤에 태스크 큐에 콜백함수를 등록하는것이다. 따라서 n초뒤에 반드시 실행되는것이 보장되지 않는다.
setTimeout 함수는 타이머를 식별할수있는 고유 id를 반환한다.

const myTimer = setTimeout(()=> console.log('print'),2000); //고유 id
clearTimeout(myTimer) //타이머 제거

 

setInterval

n초마다 콜백함수를 실행한다.

let count = 1;

const intervalId = setInterval(()=>{
	console.log(count)
    if(count++ === 10) clearInterval(intervalId) //조건만족시 자기자신의 콜백함수 제거
}, 1000)

 

디바운스와 스로틀

짧은시간 간격으로 연속해서 발생하는 이벤트를 그룹화하여, 과도한 호출을 방지하는 기법이다.
scroll, resize, mousemove는 짧은시간 연속해서 발생한다. 이벤트핸들러가 과도하게 호출되어 성능에 문제가 될수있다. 

 

debounce는 이벤트가 연속발생하면, 일정시간 이벤트 핸들러를 호출하지않다가 일정 시간 경과 후 1번만 호출되도록 한다.

<input type="text">

...

const myInput = document.querySelector('input');

const debounce = (callback, delay)=> {
	let timerID;
    return event => { // timerID를 기억하는 클로저 반환
		if(timerID) clearTimeout(timerID);
        timerID = setTimeout(callback, delay, event)
	}
}

...

myInput.oninput = debounce(e=>{
	console.log(e.target.value)
},300);

인풋에 입력된값으로 ajax요청하는 자동완성 UI 구현 이나, 버튼 중복 클릭 방지 등에 유용하다.
* lodash에 debounce를 쓰자.

 

throttle은 delay 시간이 경과했을때 이벤트가 발생하면 콜백을 호출하고, 새로운 타이머를 재설정한다.
따라서 delay 마다 콜백함수가 호출된다.

const throttle = (callback, delay)=> {
	let timerID;
    return event => {
		if(timerID) return;
        timerID = setTimeout(()=>{
			callback(event);
            timerId = null;
		}, delay, event)
	}
}

* lodash에 throttle를 쓰자.