소개

Lodash는 JavaScript의 유용한 유틸리티 모음 라이브러리입니다. Lodash에는 비동기 처리를 위한 몇 가지 함수가 포함되어 있어서, 비동기 작업을 쉽게 처리할 수 있습니다. 이번 포스트에서는 Lodash의 비동기 처리 함수들과 사용 예제에 대해 알아보겠습니다.

1. _.debounce 함수

_.debounce 함수는 함수 실행을 지연시키는 역할을 합니다. 여러 번 호출되는 이벤트 핸들러에서 유용하게 사용할 수 있습니다. 지정된 시간 동안 마지막 호출 이후에만 함수가 실행됩니다.

import _ from 'lodash';

function search(query) {
  // 검색을 수행하는 비동기 함수
}

const debouncedSearch = _.debounce(search, 300);

input.addEventListener('input', (event) => {
  const query = event.target.value;
  debouncedSearch(query);
});

위의 예제에서, input 요소에 입력이 발생할때마다 search 함수가 호출됩니다. 하지만, 호출은 마지막 입력 이후 300ms가 경과할 때까지 지연됩니다.

2. _.throttle 함수

_.throttle 함수는 함수 실행을 일정한 시간 간격으로 제한하는 역할을 합니다. 연속해서 호출되는 이벤트 핸들러에서 사용하면 유용합니다. 지정된 시간간격마다 함수가 실행됩니다.

import _ from 'lodash';

function trackScroll() {
  // 스크롤을 추적하는 비동기 함수
}

const throttledTrackScroll = _.throttle(trackScroll, 100);

window.addEventListener('scroll', throttledTrackScroll);

위의 예제에서는 scroll 이벤트가 발생할 때마다 trackScroll 함수가 실행됩니다. 하지만, 호출은 100ms의 간격으로 제한됩니다.

3. _.delay 함수

_.delay 함수는 지정된 시간 후에 함수를 실행합니다. 시간은 밀리초 단위로 지정할 수 있습니다.

import _ from 'lodash';

function showAlert() {
  alert('안녕하세요!');
}

_.delay(showAlert, 5000);

위의 예제에서는 showAlert 함수가 5초 뒤에 실행됩니다.

결론

Lodash의 비동기 처리 함수들은 JavaScript에서 비동기 작업을 효율적으로 처리하는 데 도움이 됩니다. _.debounce, _.throttle, _.delay 함수는 각각 함수 실행을 지연시키거나 제한하는 기능을 제공합니다. 이러한 함수들을 적절히 활용하여 코드의 성능을 향상시키고 사용자 경험을 개선할 수 있습니다.

Reference

• Lodash 공식 문서: https://lodash.com/docs