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

防抖和节流

  • 防抖节流的作用都是用于防止函数被多次调用,
  • 区别在于,如果一个用户一直触发这个函数,每次触发的间隔都小于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(()=>自己的方法名())"
相关推荐
西洼工作室1 分钟前
前端监控:错误捕获与行为日志全解析
前端·javascript
huangql52010 分钟前
JavaScript数据结构实战指南:从业务场景到性能优化
javascript·数据结构·性能优化
Glommer31 分钟前
某易易盾验证码处理思路(下)
javascript·逆向
砺能37 分钟前
window.postMessage与window.dispatchEvent
前端·javascript
雪中何以赠君别39 分钟前
【框架】CLI 工具笔记
javascript·node.js
th73944 分钟前
Symbol的11个内置符号的使用场景
javascript
古夕1 小时前
基于 Vue 3 + Monorepo + 微前端的中后台前端项目框架全景解析
前端·javascript·vue.js
JustNow_Man1 小时前
【Cline】插件中clinerules的实现逻辑分析
开发语言·前端·javascript
天***88961 小时前
Chrome离线版下载版,Chrome离线版安装文件,Chrome离线包
前端·chrome
呼叫69451 小时前
requestAnimationFrame 深度解析
前端·javascript