在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
函数,分别实现了点击和输入事件的节流和防抖效果。