Vue3通过hooks方式封装节流和防抖的代码详解

import { ref, onBeforeUnmount } from 'vue';

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

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

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

  onBeforeUnmount(cancel); // 在组件卸载前清除定时器

  return [throttledCallback, cancel];
}

export default useThrottle;

import { ref, onBeforeUnmount } from 'vue';

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

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

  const debouncedCallback = (...args) => {
    cancel(); // 取消之前的定时器
    timerId.value = setTimeout(() => {
      callback(...args);
    }, delay);
  };

  onBeforeUnmount(cancel); // 在组件卸载前清除定时器

  return [debouncedCallback, cancel];
}

export default useDebounce;

<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 = () => {
      lastClickTime.value = new Date().toISOString();
    };

    // 使用节流
    const [handleClickThrottled] = useThrottle(handleAction, 500);

    // 或者使用防抖
    // const [handleClickDebounced] = useDebounce(handleAction, 500);

    return {
      lastClickTime,
      handleClick: handleClickThrottled,
      // 或者使用防抖版本
      // handleClick: handleClickDebounced,
    };
  },
};
</script>