vue使用防抖函数,vue 节流
本文主要介绍Vue中的防抖和节流方法，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
什么是防抖/油门防抖(去抖)油门页面使用场景总结
何为防抖/节流
先说防抖和节流。
防抖(去抖)
防抖是指同一事件在一段时间内会被触发多次，但我们的目的只是让他们在事件未被触发后执行，比如mousemove事件、输入框更改事件等。这个时候，我们需要一种方法来控制他。事件一段时间不执行后，执行事件，防抖。
节气门(节气门)
节流是指同一事件会在短时间内触发多次，但我们的目的是让它们在给定时间内只触发一次，比如滚动事件、点击事件等。这时候我们就需要一个方法来控制，一段时间内(0.5S/1S)只能触发一个事件，也就是节流。
防抖(debounce)
//防抖
导出默认函数去抖(fn，time) {
时间=时间 200
//计时器
让定时器=空
返回函数(.args) {
var _this=this
if(计时器){
清除超时(定时器)
}
timer=setTimeout(function() {
计时器=空
fn.apply(_this，args)
}，时间)
}
}
节流(throttle)
//节流
导出默认函数throttle(fn，time) {
让定时器=空
时间=时间 1000
返回函数(.args) {
if(计时器){
返回
}
const _this=这个
timer=setTimeout(()={
计时器=空
}，时间)
fn.apply(_this，args)
}
}
页面使用
只是用点击速度来模拟触发事件的频率。
El-button @click=clickDebounce 防抖/el-button
El-button @click=clickThrottle 油门/el-button
//引用定义的JS方法
从“@/utils/debounce”导入去抖
从“@/utils/throttle”导入节流
方法：{
clickDebounce: debounce((e)={
console.log(1)
}, 1000),
单击Throttle: throttle((e)={
console.log(2)
}, 1000),
}
使用场景
根据业务需求，可以有很多很多的使用场景。只举两个例子。
防抖(debounce)搜索框自动搜索时，下拉框远程搜索时，用户无需完成输入即可保存请求资源。
当鼠标移动时，鼠标停止，然后执行方法。
滚动页面时为节流(throttle)
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。