vue防抖节流，全局定义，使用

森林的尽头是阳光2025-09-16 9:30

防抖和节流

防抖节流的作用都是用于防止函数被多次调用，
区别在于，如果一个用户一直触发这个函数，每次触发的间隔都小于wait，防抖的情况下只会调用一次，而节流的情况会每隔一段一段时间调用函数
防抖在间隔时间内被触发会重新计时，执行最后一次
节流在间隔时间内只执行一次，第一次

防抖方法

防抖在间隔时间内被触发会重新计时，执行最后一次

javascript 复制代码

let timer=null
export function debouce(fn, time=1000){
 if(timer!=null){
    clearTimeout(timer)
 }
 timer=setTimeout(()=>{
	typeof fn==='function'&&fn.apply(this)
 },time)
}

节流

节流在间隔时间内只执行一次，第一次

javascript 复制代码

let flag=false;
export const throttle=(fn,time=300)=>{
	if(flag) clearTimeout(timer)
	flag=true
	timer=setTimeout(()=>{
		typeof fn==='function'&&fn().apply(this)
		flag=false
	},time)
}

main.js中全局引入

javascript 复制代码

import {debouce, throttle} from "xx.js"

Vue.prototype.$D = { debouce, throttle }

使用

javascript 复制代码

@click="$D.debouce(()=>自己的方法名())"