41장 타이머

[humonnom]

41장 타이머

호출 스케줄링

• 함수는 명시적으로 호출하면 실행됨
• 이후에 호출되도록 예약하고 싶으면 타이머 함수를 사용함

디바운스와 스로틀

• scroll, resize, input, mousemove => 짧은 시간 연속으로 발생
• 연속으로 발생하는 이벤트를 그룹화 하는 프로그래밍 기법(타이머 함수 사용)

디바운스

• 이벤트를 그룹화하여 마지막에 한번만 이벤트 핸들러를 호출하도록 함

const $target = document.querySelector('body');
const $input = document.createElement('input');
const $msg = document.createElement('div');
$msg.textContent = "초기상태";
$target.append($input, $msg);

// 디바운스 함수 구현
const debounce = (callback, delay) => {
    let timerId;
    return event => {
        console.log('디바운스');
        if (timerId) clearTimeout(timerId); // 등록된 ID가 있다면 delay만큼 경과되지 않은 것이므로 해당 ID의 예약 취소
        timerId = setTimeout(callback, delay, event); // 새로 등록
    }
}
// 이벤트 추가
$input.oninput = debounce(e => {
    $msg.textContent = e.target.value;
}, 300);

• 타이머의 등록과 취소가 event 시점마다 발생
• 등록된 타이머를 체크하여 취소 후 다시 등록함
• 일정 기간(delay) 이벤트가 일어나지 않으면 콜백 함수가 동작함
  • 등록된 타이머가 취소되지 않는 원리
• 실무에서는 Underscore의 debounce 함수, Lodash의 debounce 함수 사용

쓰로틀링

• delay로 설정한 시간당 한번만 함수가 호출되도록 함
• 디바운스와 다르게 타이머가 등로되는 기준이 delay이며 등록한 타이머를 취소하지 않음
• 한번 동록된 타이머는 실행되며, 타이머가 등록되어있는 동안(즉, delay 기간 동안)에는 아무 동작을 하지 않음으로써 이벤트를 무시한다.
• 스크롤 이벤트 처리, 무한 스크롤 UI 구현등에 적합
• 실무에서는 Underscore의 throttle 함수, Lodash의 throttle 함수 사용

리액트 디바운스, 스로틀

• 참고