[typescript] 타입스크립트에서의 비동기 작업에서의 중복 실행 방지 방법

14 Dec 2023

typescript

비동기 작업을 수행할 때 중복된 요청을 방지하고 싶을 때가 있습니다. 특히, 사용자 인터페이스에서의 이벤트 핸들러와 같이 여러 번 호출될 수 있는 상황에서 중복 실행을 방지하는 것이 중요합니다. 이러한 상황에서 타입스크립트를 사용하여 중복 실행을 방지하는 방법에 대해 알아보겠습니다.

1. Debouncing을 사용하기

Debouncing은 중복 실행을 방지하는 간단하고 효율적인 방법입니다. 주어진 시간 동안 동일한 이벤트가 발생하지 않으면 해당 이벤트를 실행합니다. 이를 타입스크립트에서 구현하기 위해서는 setTimeout과 clearTimeout을 사용하여 디바운스 로직을 작성할 수 있습니다.

예를 들어, 다음은 debounce 함수의 간단한 예시입니다:

function debounce(func: Function, delay: number) {
  let timeoutId: NodeJS.Timeout;
  return (...args: any[]) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func(...args), delay);
  };
}

// 사용 예시
const debouncedFunc = debounce(() => {
  // 비동기 작업 실행
}, 300);

위의 예시에서 debounce 함수는 주어진 시간동안 함수를 호출하지 않고 기다린 뒤에 호출하는 기능을 수행합니다.

2. Throttling을 사용하기

Throttling은 지정된 주기마다 최대 한 번의 실행만을 허용하는 방법입니다. 이는 고정된 시간 간격마다 함수가 실행되도록 제어합니다.

예를 들어, 다음은 throttle 함수의 간단한 예시입니다:

function throttle(func: Function, delay: number) {
  let isThrottled = false;
  return (...args: any[]) => {
    if (!isThrottled) {
      func(...args);
      isThrottled = true;
      setTimeout(() => {
        isThrottled = false;
      }, delay);
    }
  };
}

// 사용 예시
const throttledFunc = throttle(() => {
  // 비동기 작업 실행
}, 300);

위의 예시에서 throttle 함수는 주기적으로 지정된 시간 간격으로 함수가 호출되도록 만듭니다.

3. RxJS를 사용하기

RxJS는 Observable을 이용하여 중복 실행을 방지하는 방법을 제공합니다. debounceTime 및 throttleTime과 같은 연산자를 사용하여 간단하게 중복 실행을 방지할 수 있습니다.

예를 들어, debounceTime을 사용한 예시는 다음과 같습니다:

import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

const button = document.getElementById('myButton');
fromEvent(button, 'click').pipe(
  debounceTime(300)
).subscribe(() => {
  // 비동기 작업 실행
});

위의 예시에서 debounceTime은 지정된 시간 동안 이벤트가 발생하지 않았을 때 비동기 작업을 실행합니다.

마무리

이러한 방법들을 통해 타입스크립트에서의 비동기 작업의 중복 실행을 효과적으로 방지할 수 있습니다. 개발 상황 및 요구에 따라 적절한 방법을 선택하여 사용하면 됩니다.

이러한 방법들은 실제 프로덕션 환경에서 사용될 때 효과적으로 중복 실행을 방지하는데 도움을 줄 것입니다.

참고: