vue中使用闭包函数(防抖函数)的使用

这是抽离出去的闭包函数的封装

export default function debounce(func, wait=1000) {
    var timer=null;
    return function() {
      if (timer){
        clearTimeout(timer);
      }
      timer = setTimeout(() => {
        func();
      }, wait);     
    }
}

使用:我们在引入闭包函数,比如一个点击事件,进行防抖的操作,不是直接操作闭包函数,而是操作进行闭包函数处理之后返回的那个函数,不然每次都会创建不同的timer,清除不掉,这也是我当时一直好奇为什么我的闭包没有防抖的效果,而且必须吧timer放在函数外面才会生效。
网上有很多使用闭包函数的方法,有的是直接拿过来,在methods中使用

第一种方法
methods: {
       addContent () {
           //执行的内容。进行防抖的操作
       },
       changeContent: debounce(function() { //防抖函数
           this.addContent()
       }, 2000, true),
}

这种方法必须按照这种格式来写防抖函数的事件,但是我也很好奇,看了网上很多的防抖函数闭包的书写,但是我就是没有看到最后再组件销毁的时候清除闭包,这点让我很疑惑
但是引入的闭包函数不能直接操作赋值为null,import引入的文件不允许直接修改,如果要修改必须进行深复制,不然会报错

第二种写法(尝试在beforeDestroy钩子中销毁闭包)

思路:就是不直接使用引入的防抖函数对事件进行加工,而是存放在data中进行了复制,然后用data中的闭包函数对事件进行加工,最后清除的时候只需要让data中的闭包函数为null就行了,所以这个加工需要再created这个钩子中进行

<template>
  <div id="app">
        <el-button type="primary" @click="jieliu">主要按钮</el-button>
        <router-link to='/about'>点击跳转</router-link>
  </div>
</template>
<script>
import debounce from './utils/debounce.js'
export default {
  data(){
    return{
      click:'',
      debounce,//引入的防抖函数进行复制
    }
  },
  created(){
      this.click=this.debounce(this.tap,500); //对事件进行防抖加工,并把加工之后的函数存放在data中,执行的时候是执行的data中存放的函数
  },
   methods:{
     jieliu(){//事件函数
       this.click();//触发处理之后的防抖函数
     },
     tap(){//事件执行的具体操作内容
       console.log('触发了')
     }
    },
   beforeDestroy(){
     this.debounce=null;//清除闭包
     console.log('销毁了')
   }
}
</script>

这个地方有点绕,也可以直接在this.debounce()这个防抖函数中一个执行的方法,不用调用methods中的方法

this.debounce(()=>{console.log('触发了')},500)

以上方法就可以将闭包清除了,总之就是对闭包函数进行赋值存放在data中,清除的时候清除data中的闭包函数就可以了

Logo

前往低代码交流专区

更多推荐