快捷導(dǎo)航

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

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

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

創(chuàng)建 useThrottle Hook

節(jié)流函數(shù)的作用是確保一個函數(shù)在一段時間內(nèi)只能被執(zhí)行一次，即使它被連續(xù)調(diào)用多次也只會執(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); // 在組件卸載前清除定時器

  return [throttledCallback, cancel];
}

export default useThrottle;

創(chuàng)建 useDebounce Hook

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

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;

解析

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

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

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

您可能感興趣的文章: