Vue中使用防抖与节流的方法
作者:丿小破孩灬
这篇文章主要为大家介绍了Vue中使用防抖与节流的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
何为防抖/节流
首先先说说何为防抖与节流
防抖(debounce
)
防抖就是一段时间内会多次触发相同的事件,而我们的目的却只是想让他们在不触发的多久以后再执行该事件,例如鼠标移动事件(mousemove)、输入框变更事件(change)等等,这个时候我们就需要一个方法去控制他,一段时间内没执行该事件后,执行该事件,即为防抖
节流(throttle
)
节流就是短时间内会多次触发相同的事件,而我们的目的却只是想让他们既定时间内只触发一次,例如滚轮事件(scroll)、鼠标点击事件(click)等等,这个时候我们就需要一个方法去控制他,一段时间(0.5S/1S)之内只能触发一次事件,即为节流
防抖(debounce)
// 防抖 export default function debounce(fn, time) { time = time || 200 // 定时器 let timer = null return function(...args) { var _this = this if (timer) { clearTimeout(timer) } timer = setTimeout(function() { timer = null fn.apply(_this, args) }, time) } }
节流(throttle)
// 节流 export default function throttle(fn, time) { let timer = null time = time || 1000 return function(...args) { if (timer) { return } const _this = this timer = setTimeout(() => { timer = null }, time) fn.apply(_this, args) } }
页面使用
直接就用click的点击速度模拟触发事件的频率了
<el-button @click="clickDebounce">防抖</el-button> <el-button @click="clickThrottle">节流</el-button>
//引用定义好的JS方法 import debounce from '@/utils/debounce' import throttle from '@/utils/throttle' methods: { clickDebounce: debounce((e) => { console.log(1) }, 1000), clickThrottle: throttle((e) => { console.log(2) }, 1000), }
使用场景
使用场景根据业务需求可以有很多很多 简单举两个例子
防抖(debounce)搜索框自动搜索的时候,可搜索下拉框远程搜索的时候,用户在没输入完的情况下,防抖可以节约请求资源。
鼠标移动的时候,鼠标停下来不动再执行方法
节流(throttle)滚动页面的时候
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!