Vue 防抖函数封装和解析

实例1：

　　mounted() {
      // 1. 将刷新操作包装到防抖函数debounce中
      const refresh = this.debounce(this.$refs.scroll.refresh, 50)
      // 2. 如果事件总线$bus中的事件itemImageLoad被触发，则执行包装后的刷新操作
      this.$bus.$on(‘itemImageLoad‘, () =>{
        refresh()
      })
    },
    methods:{
      /**
       * 事件监听相关
       */
      // 防抖函数(首页中，图片加载完成后要调用mounted中的刷新操作，为防止刷新太过频繁）
      // 所以，创建一个防止频繁刷新的防抖函数debounce(自定义名)，
      // 解析：当一次刷新30张图出来时，
      //  a. 第一张图加载完成后调用:refresh()
      //  b. 会在debounce中创建一个timer变量，值为null
      //  c. 返回一个函数function，这时timer为null，继续向下执行，定时器生成等待执行内部刷新代码（delay结束时）
      //  d. 这时，如果时间delay还没到，第二张图被加载，也调用refresh（），这时，timer是第一个图的定时器timer对象；
      //      通过if判断后，将第一个图的定时器清除，不在执行内部刷新操作。        
      //      （但如果第二张图加载的很慢，超过delay的时间，第一张图的定时器内部刷新代码就会被执行）
　　　 //  e. 依次加载图片，调用refresh()，只要图片加载速度在定时器被调用前完成，就可以清除定时器，不执行刷新

      debounce(func, delay){
        let timer = null
        // 使用...args 可以传多个参数
        return function (...args) {　　　　　　　　　　// 1. 定义一个返回函数function
          if(timer) clearTimeout(timer)
          timer = setTimeout(() =>{
            func.apply(this, args)
          },delay)
        }
      },
    },