Vue3+ts はグローバルなスロットリング機能と手ぶれ補正機能をカプセル化します

Vue3 + TypeScript プロジェクトでは、パフォーマンスを最適化するために、スロットリング機能や手ぶれ補正機能を使用して関数の実行頻度を制御することが必要になることがよくあります。ここでは、プロジェクト全体で簡単に使用できるように、グローバルスロットル機能と手ぶれ補正機能をカプセル化できます。

グローバルスロットル機能をカプセル化します。

import {
    
     ref } from 'vue';

export const useThrottle = (fn: Function, delay: number) => {
    
    
  const canRun = ref(true);
  return (...args: any[]) => {
    
    
    if (!canRun.value) return;
    canRun.value = false;
    setTimeout(() => {
    
    
      fn(...args);
      canRun.value = true;
    }, delay);
  };
};

関数を使用してuseThrottleスロットル関数をカプセル化し、実行する関数と実行間隔を渡して、新しい関数を返すことができます。この関数がトリガーされると、実行可能かどうかが判定されます。実行できる場合はにcanRun設定されfalse、一定時間後ににリセットされtrue、次の呼び出しを再度実行できるようになります。

グローバル手ぶれ補正機能をカプセル化

import {
    
     ref } from 'vue';

export const useDebounce = (fn: Function, delay: number) => {
    
    
  let timer: ReturnType<typeof setTimeout>;
  return (...args: any[]) => {
    
    
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
    
    
      fn(...args);
    }, delay);
  };
};

関数を使用しuseDebounceて手ぶれ補正関数をカプセル化し、実行する関数と実行間隔を渡して、新しい関数を返すことができます。この関数がトリガーされると、以前のタイマーがクリアされ、一定の時間が経過した後に新しいタイマーがリセットされ、次の関数が実行されます。

グローバルスロットリング機能とデバウンス機能を使用する

グローバルスロットリング機能と手ぶれ補正機能をカプセル化すると、プロジェクト全体でそれらを使用できるようになります。たとえば、Vue コンポーネントでは次を使用します。

import {
    
     useThrottle, useDebounce } from '@/utils/throttle-debounce';

export default {
    
    
  setup() {
    
    
    const handleClick = useThrottle(() => {
    
    
      console.log('click');
    }, 1000);

    const handleInput = useDebounce((value: string) => {
    
    
      console.log(value);
    }, 500);

    return {
    
    
      handleClick,
      handleInput,
    };
  },
};

上の例では、setup関数useThrottleとuseDebounce関数を使用して関数をカプセル化し、クリックイベントと入力イベントのそれぞれの調整効果と手ぶれ補正効果を実現していますhandleClick。handleInput