Vue中使用防抖与节流的方法
更新时间：2022年01月18日 10:42:00 作者：丿小破孩灬
这篇文章主要为大家介绍了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)滚动页面的时候
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
相关文章
本篇文章主要介绍了vue 计时器组件的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
下面小编就为大家分享一篇vue.js2.0点击获取自己的属性和jquery方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要给大家介绍了关于Vue项目全局配置页面缓存之实现按需读取缓存的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起看看吧2018-08-08
vue2.x版本中computed和watch的使用及关联和区别
这篇文章主要介绍了vue2.x版本中computed和watch的使用及关联和区别，文章围绕主题展开详细的内容介绍，需要的小伙伴可以参考一下2022-07-07
web面试MVC与MVVM区别及Vue为什么不完全遵守MVVM解答
这篇文章主要介绍了web面试中常问问题，MVC与MVVM区别以及Vue为什么不完全遵守MVVM的难点解答，有需要的朋友可以借鉴参考下，希望能够有所帮助2021-09-09
本文分步骤给大家介绍了vue中引入mxGraph的方法，非常不错，给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
使用vscode格式化文档无效的解决办法(vue代码格式化文档无效)
这篇文章主要给大家介绍了关于使用vscode格式化文档无效的解决办法,也就是vue代码格式化文档无效,这是最近突然遇到的一个问题,这里给大家介绍一下解决的办法,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了Vue如何循环提取对象数组中的值,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-11-11
本篇文章主要介绍了vue小图标favicon不显示的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
Element UI的el-upload上传组件相信各位小伙伴都已经非常熟悉，最近接了一个新需求，要求在el-upload组件基础上实现分片上传功能，即小于等于5M文件正常上传，大于5M文件切成5M每片上传,那么这个功能怎么实现呢?一起看看吧2022-09-09
最新评论