SoFunction
Updated on 2025-04-05

Detailed explanation of the code for Vue3 encapsulating throttling and anti-shake through hooks

Create useThrottle Hook

The purpose of the throttling function is to ensure that a function can only be executed once for a period of time, and will only be executed once even if it is called several times in succession.

import { ref, onBeforeUnmount } from 'vue';

function useThrottle(callback, delay = 100) {
  let timerId = ref(null);

  const cancel = () => {
    if ( !== null) {
      clearTimeout();
       = null;
    }
  };

  const throttledCallback = (...args) => {
    if (!) {
       = setTimeout(() => {
        callback(...args);
         = null;
      }, delay);
    }
  };

  onBeforeUnmount(cancel); // Clear the timer before component uninstallation
  return [throttledCallback, cancel];
}

export default useThrottle;

Create useDebounce Hook

The anti-shake function ensures that only the last operation will trigger the function execution within a given time period, and if a new operation occurs during this time, it will be re-timed.

import { ref, onBeforeUnmount } from 'vue';

function useDebounce(callback, delay = 100) {
  let timerId = ref(null);

  const cancel = () => {
    if ( !== null) {
      clearTimeout();
       = null;
    }
  };

  const debouncedCallback = (...args) => {
    cancel(); // Cancel the previous timer     = setTimeout(() => {
      callback(...args);
    }, delay);
  };

  onBeforeUnmount(cancel); // Clear the timer before component uninstallation
  return [debouncedCallback, cancel];
}

export default useDebounce;

Analysis

  • useThrottle: This hook accepts a callback functioncallbackand a delay timedelay. It returns a throttling functionthrottledCallback, this function will set a timer after the first call,delayExecute after timecallbackand reset the timer. In addition, it returns acancelFunctions are used to cancel the timer.
  • useDebounce: Similar touseThrottle, but it is called every timedebouncedCallbackAny unfinished timers will be cancelled first, and then a new timer will be set. This means only after the last calldelayAfter the time is over,callbackOnly then will it be executed.

Use these hooks in Vue components

<template>
  <div>
    <button @click="handleClick">Click me</button>
    <p>Clicked at: {{ lastClickTime }}</p>
  </div>
</template>

<script>
import useThrottle from './useThrottle';
import useDebounce from './useDebounce';

export default {
  setup() {
    const lastClickTime = ref('');
    const handleAction = () => {
       = new Date().toISOString();
    };

    // Use throttling    const [handleClickThrottled] = useThrottle(handleAction, 500);

    // Or use anti-shake    // const [handleClickDebounced] = useDebounce(handleAction, 500);

    return {
      lastClickTime,
      handleClick: handleClickThrottled,
      // Or use the anti-shake version      // handleClick: handleClickDebounced,
    };
  },
};
</script>

In this way, every time the button is clicked, the throttling or anti-shake processing function will be called and updatedlastClickTime. You can choose to use throttling or anti-shake processing functions as needed.

The above is the detailed explanation of the code of Vue3 encapsulating throttling and anti-shake through hooks. For more information about Vue3 hooks encapsulating throttling and anti-shake, please pay attention to my other related articles!