CH41 타이머

41 타이머

호출 스케줄링

타이머 함수를 통해 일정 시간이 경과한 이후에 호출되도록 함수 호출을 예약하는 것

타이머함수

setTimeout, setInterval - 타이머 생성

clearTimeout, cleatInterval - 타이머 제거

⇒ 빌트인 함수가 아니라 전역객체의 메서드로 제공 → 호스트 객체임

setTimeout

딱 한번 동작

setInterval

반복동작

타이머 함수는 비동기 처리방식으로 작동함 → js엔진은 싱글스레드이므로

타이머 함수

setTimeout/clearTimeout

setTimeout은 두번째 인수로 받은 시간으로 단 한번 동작하는 타이머를 생성함

이후 만료되면, 첫 인수의 콜백함수가 호출됨

const timer=setTimeout(func, delaytime, [param1,param2...])

func : 콜백함수

delaytime : 타이머 시간

param1, param2 … : 콜백함수에 전달해야할 인수

예시

setTimeout(name=>console.log(name), 1000, "lee");

반환값

타이머를 식별하기 위한 고유한 타이머id를 반환함

브라우저 환경인 경우 숫자. nodejs는 객체.

clearTimeout

인수로 타이머 id를 받아서 타이머 취소가능

const timer=setTimeout(name=>console.log(name), 1000, "lee");
clearTimeout(timer);

setInterval/clearInterval

두번째 인수로 전달받은 시간으로 반복동작하는 타이머를 생성함

만료될때마다 첫 인수로 전달받은 콜백함수가 반복호출됨

const timerId=setInterval(func, delaytime, [param1,param2...])

마찬가지로 식별 id를 반환하며, 이를 clearInterval을 통해 취소할 수 있음

디바운드와 스로틀

짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화하여 과도한 이벤트 핸들러 호출을 방지하는 프로그래밍 기법

디바운스

짧은 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간이 경과한 이후, 딱 한번 이벤트가 호출되게 하는 것

⇒ 이벤트를 그룹화하여 한번만 실행되게하는것

const debounce = (callback, delay)=>{
    let timeId;
    return event=>{
        if(timeId) clearTimeout(timerId);
        timerId=setTimeout(callback, delay, event);
    }
}
$node.oninput=debounce(e=>{
        $msg.textContent=e.target.value;
    }, 300);

⇒ 입력이 발생하였을때 3초 있다가 반영되도록 함

입력이 완료되었을때(마지막으로 입력받은 후 3초가 지나면), Ajax 통신을 하도록 활용이 가능함

실무에서는 Underscore의 debounce 함수나 Lodash의 debounce 함수 사용

스로틀

짧은 시간 간격으로 발생하는 이벤트를 그룹화하여 일정단위 시간으로 이벤트가 호출되도록 호출주기를 만듦

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

특정 시간이 다 지나갈 때까지 이벤트를 발생시키지 않음

scroll event처리나 무한 스크롤 UI구현에 사용됨

underscore의 throttle 함수나 lodash의 throttle함수 사용