VUE

useRateLimit Composable

Rate limit function calls with configurable interval and max calls

Vue3ComposablesRateLimitPerformanceEvents

Code

import { ref, onUnmounted } from 'vue';

export function useRateLimit(
  fn: (...args: any[]) => void,
  interval = 1000,
  maxCalls = 1
) {
  const callTimes = ref<number[]>([]);
  const isRateLimited = ref(false);
  let cleanupTimer: ReturnType<typeof setTimeout> | null = null;

  const rateLimitedFn = (...args: any[]) => {
    const now = Date.now();
    // Filter out call times outside the interval
    callTimes.value = callTimes.value.filter(time => now - time < interval);

    __TOKEN_18__ (callTimes.value.length < maxCalls) {
      callTimes.value.push(now);
      isRateLimited.value = false;
      fn(...args);
    } else {
      isRateLimited.value = true;
    }

    // Clean up old call times after interval
    __TOKEN_20__ (cleanupTimer) clearTimeout(cleanupTimer);
    cleanupTimer = setTimeout(() => {
      callTimes.value = [];
      isRateLimited.value = false;
    }, interval);
  };

  const reset = () => {
    callTimes.value = [];
    isRateLimited.value = false;
    __TOKEN_22__ (cleanupTimer) clearTimeout(cleanupTimer);
  };

  onUnmounted(() => {
    __TOKEN_23__ (cleanupTimer) clearTimeout(cleanupTimer);
  });

  return { rateLimitedFn, isRateLimited, reset };
}

// Usage example
// const submitForm = (data) => console.log('Submit:', data);
// const { rateLimitedFn: rateLimitedSubmit, isRateLimited } = useRateLimit(submitForm, 5000, 1);
// // Only allows 1 submit every 5 seconds
// rateLimitedSubmit({ name: 'Test' });