在Vue中使用防抖与节流,及this指向的问题

在Vue中使用防抖与节流,及this指向的问题

目录

使用防抖与节流,及this指向问题

一顿操作后

使用防抖函数所遇见的坑

正常写法

使用

Vue中写法使用

Vue中的watch的防抖简写

使用防抖与节流,及this指向问题

最近项目中遇到了防抖与节流问题,搜索了很多文章都有this指向的问题,最后不得不采取一种很low的方法

data中定义isFirst为1

if (this.isFirst < 2){     this.isFirst = 2     setTimeout(() => {         this.isFirst = 1       }, 1000)   }

这样就形成了假的节流

但是我们怎么能屈服于这种写法

继续探索vue项目中用闭包的方式防抖节流

一顿操作后  const delay = (function () {     let timeout     return (callback, ms) => {       if (timeout) clearTimeout(timeout)       let callNow = !timeout       timeout = setTimeout(() => {         timeout = undefined       }, ms)       if (callNow) callback.apply(this, [callback, ms])     }   })()  export default {     methods: {         delay(() => {           // do something        }, 1000)     } }

用了立即执行的函数方法,就能够获取到全局的this了 

使用防抖函数所遇见的坑

以前的防抖和节流都是在js中直接书写,后使用vue进行组件化开发之后,有些地方需要注意。

正常写法     function debounce(func, delay) {       let timeout       return function () {         let context = this;         let args = arguments;         if (timeout) {           clearTimeout(timeout)         }         timeout = setTimeout(() => {           func.apply(context, args)         }, delay)       }     } 使用     function change(volume, data) {       debounce(() => {         console.log('change', volume, data);       }, 500)     } Vue中写法使用

注意: Vue中使用时,需要定义timeout,同时在防抖函数中,this的指向发生了变化,需要在return之前获取vue实例。这个时候,你直接使用,还是不行的,只要debug就会发现debounce返回的func没有进去,需要手动执行一下(添加括号)。

  data() {     return {       timeout: null     }   }     change(volume, data) {       this.debounce(() => {         console.log('change', volume, data)       }, 500)     },     debounce(func, delay) {       let context = this // this指向发生变化,需要提出来       let args = arguments       return function () {         if (context.timeout) {           clearTimeout(context.timeout)         }         context.timeout = setTimeout(() => {           func.apply(context, args)         }, delay)       }()// 注意:我加了()     } Vue中的watch的防抖简写     watchObj: {       handler(val) {         let _this = this         clearTimeout(this.timeout)         this.timeout = setTimeout(() => {           _this.handlerData(val)         }, 500)       }     }

以上为个人经验,希望能给大家一个参考,也希望大家多多支持易知道(ezd.cc)。

推荐阅读