快捷導(dǎo)航

Vue3通過(guò)hooks方式封裝節(jié)流和防抖的代碼詳解

更新時(shí)間：2024年10月20日 08:30:21 作者：侯亮平

vue3 中的 hooks 就是函數(shù)的一種寫法,就是將文件的一些單獨(dú)功能的js代碼進(jìn)行抽離出來(lái),放到單獨(dú)的js文件中,或者說(shuō)是一些可以復(fù)用的公共方法/功能,本文給大家介紹了Vue3通過(guò)hooks方式封裝節(jié)流和防抖,需要的朋友可以參考下

創(chuàng)建 useThrottle Hook

節(jié)流函數(shù)的作用是確保一個(gè)函數(shù)在一段時(shí)間內(nèi)只能被執(zhí)行一次，即使它被連續(xù)調(diào)用多次也只會(huì)執(zhí)行一次。

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); // 在組件卸載前清除定時(shí)器

  return [throttledCallback, cancel];
}

export default useThrottle;

創(chuàng)建 useDebounce Hook

防抖函數(shù)則是確保在一個(gè)給定的時(shí)間段內(nèi)，只有最后一次操作會(huì)觸發(fā)函數(shù)執(zhí)行，如果在這段時(shí)間內(nèi)還有新的操作發(fā)生，則重新計(jì)時(shí)。

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(); // 取消之前的定時(shí)器
    timerId.value = setTimeout(() => {
      callback(...args);
    }, delay);
  };

  onBeforeUnmount(cancel); // 在組件卸載前清除定時(shí)器

  return [debouncedCallback, cancel];
}

export default useDebounce;

解析

useThrottle: 這個(gè) hook 接受一個(gè)回調(diào)函數(shù) callback 和一個(gè)延遲時(shí)間 delay。它返回一個(gè)被節(jié)流的函數(shù) throttledCallback，這個(gè)函數(shù)在首次調(diào)用后會(huì)設(shè)置一個(gè)定時(shí)器，在 delay 時(shí)間之后執(zhí)行 callback 并重置定時(shí)器。此外，它還返回了一個(gè) cancel 函數(shù)用來(lái)取消定時(shí)器。
useDebounce: 類似于 useThrottle，但是它在每次調(diào)用 debouncedCallback 時(shí)都會(huì)先取消任何未完成的定時(shí)器，然后再設(shè)置一個(gè)新的定時(shí)器。這意味著只有在最后一次調(diào)用后的 delay 時(shí)間結(jié)束后，callback 才會(huì)被執(zhí)行。

在 Vue 組件中使用這些 hooks

<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();
    };

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

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

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

這樣，每次點(diǎn)擊按鈕時(shí)，節(jié)流或防抖處理函數(shù)就會(huì)被調(diào)用，并更新 lastClickTime。你可以根據(jù)需要選擇使用節(jié)流或防抖處理函數(shù)。

以上就是Vue3通過(guò)hooks方式封裝節(jié)流和防抖的代碼詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue3 hooks封裝節(jié)流和防抖的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: