vue 事件防抖,vue使用防抖函数
本文主要介绍Vue中防抖和节流的使用，以及由此指出的问题。有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
目录
使用防抖和节流，这就点出了问题。一顿饭的操作之后，用防抖功能来接坑。正常写作用Vue写。用Vue的手表防抖速记。
使用防抖与节流，及this指向问题
最近项目遇到了防抖节流的问题，针对这个指出的问题搜索了很多文章。最后，我们不得不采用一种非常低级的方法。
数据中的IsFirst定义为1。
如果(this.isFirst 2){
this.isFirst=2
setTimeout(()={
this.isFirst=1
}, 1000)
}
这形成了错误的节流。
但是我们怎么能屈服于这种写作呢？
在vue项目中继续探索带封闭的防抖节流。
一顿操作后
常数延迟=(function () {
让超时
return(回调，毫秒)={
if(超时)clearTimeout(超时)
让callNow=！超时
timeout=setTimeout(()={
超时=未定义
}，毫秒)
if (callNow) callback.apply(this，[callback，ms])
}
})()
导出默认值{
方法：{
延迟(()={
//做点什么
}, 1000)
}
}
通过立即执行function方法，可以获得全局this。
使用防抖函数所遇见的坑
以前防抖和节流直接用js写。使用vue进行组件开发后，有几点需要注意。
正常写法
功能去抖(func，delay) {
让超时
返回函数(){
设上下文=this
设args=arguments
如果(超时){
clearTimeout(超时)
}
timeout=setTimeout(()={
func.apply(上下文，参数)
}，延迟)
}
}
使用
功能变化(容量、数据){
去抖(()={
console.log(更改，卷，数据)；
}, 500)
}
Vue中写法使用
在注意：vue中使用时，需要定义超时。同时，在防抖功能中，这个的方向发生了变化，需要在返回之前获取Vue实例。这时候如果直接用，还是不行。只要调试，就会发现去抖返回的func不进去，需要手动执行(加括号)。
data() {
返回{
超时：空
}
}
更改(卷、数据){
this.debounce(()={
console.log(更改，卷，数据)
}, 500)
},
去抖(功能，延迟){
context=this//这个点变了，需要提出来。
让args=arguments
返回函数(){
if (context.timeout) {
clearTimeout(context.timeout)
}
context . time out=setTimeout(()={
func.apply(上下文，参数)
}，延迟)
}()//注：我加了()
}
Vue中的watch的防抖简写
watchObj: {
处理器(val) {
让这个=这个
clearTimeout(this.timeout)
this.timeout=setTimeout(()={
_this.handlerData(val)
}, 500)
}
}
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。