[javascript] Lodash의 이벤트 함수들과 사용 예제
Lodash는 JavaScript 유틸리티 라이브러리로, 다양한 기능을 제공합니다. 이 중에 이벤트와 관련된 함수들을 살펴보고, 각 함수의 사용 예제를 알아보겠습니다.
1. _.once 함수
이 함수는 함수를 한 번만 실행하도록 보장합니다. 함수가 여러 번 호출되어도 첫 번째 호출 시에만 실행되고 나머지 호출은 무시됩니다.
const handleClick = _.once(() => {
console.log('Button clicked!');
});
handleClick(); // 'Button clicked!' 출력
handleClick(); // 무시됨
2. _.debounce 함수
이 함수는 일정 시간 동안 함수 호출을 지연시키는 기능을 제공합니다. 주로 이벤트 핸들러에 사용해 사용자 입력이 계속해서 발생할 때, 마지막 입력에 대해서만 처리할 때 유용합니다.
const handleInput = _.debounce((e) => {
console.log('User input:', e.target.value);
}, 300);
inputElement.addEventListener('input', handleInput);
3. _.throttle 함수
이 함수는 지정된 주기마다 함수 호출을 제한하는 기능을 제공합니다. 일정 주기 동안 반복적인 이벤트가 발생할 때, 일정 주기마다 한 번씩만 처리할 때 유용합니다.
const handleScroll = _.throttle(() => {
console.log('Scroll event occurred!');
}, 1000);
window.addEventListener('scroll', handleScroll);
4. _.once, _.debounce, _.throttle 사용 예제
아래는 위에서 소개한 함수들을 함께 사용하는 예제입니다.
const handleButtonClick = _.once(_.debounce(() => {
console.log('Button clicked!');
}, 300));
buttonElement.addEventListener('click', handleButtonClick);
위 예제에서는 버튼 클릭 이벤트가 처음 발생했을 때만 처리되며, 빠른 연속 클릭은 무시됩니다. debounce 함수는 클릭 이벤트를 한 번만 처리하기 위해 300ms의 지연시간을 제공합니다.