关于闭包函数（防抖函数）的使用和清除的方法

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中的闭包函数就可以了；