scroll, resize, input과 같은 이벤트들은 짧은 시간에 연속적으로 발생할 수 있는 이벤트입니다. 이러한 이벤트들에 바인딩 된 이벤트 핸들러가 많이 호출되면 성능 저하가 발생할 수 있습니다. 디바운스와 스로틀은 이러한 문제를 방지하기 위한 기법입니다. 디바운스와 스로틀 구현에는 타이머 함수를 활용해 구현됩니다.
디바운스
짧은 시간 동안 같은 이벤트가 여러 번 발생하는 경우 이벤트 핸들러를 호출하지 않다가 설정된 시간이 경과된 후 이벤트 핸들러가 한 번만 호출되도록 하는 것입니다.
debounce 함수가 반환하는 함수는 debounce 함수에 두 번째 인수로 전달한 시간보다 짧은 간격으로 이벤트 발생 시 이전 타이머를 취소하고 새로운 타이머를 재설정합니다. 따라서 인수로 전달한 시간보다 짧은 간격으로 이벤트 연속 발생 시 debounce 함수의 첫 번째 인수로 전달된 콜백 함수는 호출되지 않다가 delay 동안 이벤트가 발생하지 않으면 한 번만 호출됩니다.
스로틀
짧은 시간 간격으로 이벤트 연속 발생 시 일정 시간 간격으로 이벤트 핸들러가 최대 한 번만 호출되도록 합니다.
스로틀 함수는 짧은 시간 간격으로 연속해서 발생하는 이벤트의 이벤트 핸들러 호출을 방지하기 위해 이벤트를 그룹화하여 일정 시간 단위로 이벤트 핸들러가 호출되도록 호출 주기를 만듭니다.
참고
이웅모, ⌈모던 자바스크립트 - Deep Dive⌋, 2020, 41_타이머(p.803 - 808)