Vue 防抖函数封装和解析

防抖函数：

　　短时间内多次触发同一事件，只执行最后一次，或者只执行最开始的一次，中间的不执行

　　使用：

　　　　1. 页面加载图片，每张图片完成加载后会调用刷新功能，但如果不希望每次都执行刷新操作，可以使用防抖函数，实例1

　　　　2. 搜索框中输入字符后会自动搜索相关内容，但如果不希望每个字符都去搜索，可以使用防抖函数

　　主要逻辑：　　　　

　　　　1. 将刷新功能包装到自定义的防抖函数中，并调用debounce，接收它的return返回函数，生成新的函数对象refresh

　　　　2. 每张图片被成功加载，都会自动触发‘itemImageLoad’ 自定义事件，执行其中的refresh（）函数

　　　　3. 每次refresh（）被调用，会清除之前的timer定时器，并生成新的定时器（如果图片加载慢，超过定时时间，则该定时器被执行，但需要等待主线任务结束才会返回执行结果）

　　　　4. 根据JS的异步任务解析，异步任务被调用，但需要等主线同步任务执行结束后才会返回其结果，所以只有所有图片加载完成后，才会将异步结果返回到主线同步任务中，这其中根据setTimeOut的定时时间，会有一个或多个被成功执行的定时器返回结果

 

实例1：

　　mounted() {
      // 1. 将刷新操作包装到防抖函数debounce中（调用防抖函数，返回一个函数，赋值给refresh生成函数对象，只生成一次该对象）
      const refresh = this.debounce(this.$refs.scroll.refresh, 50)
      // 2. 如果事件总线$bus中的事件（图片加载完成事件）itemImageLoad被触发，则执行包装后的函数refresh（）
      this.$bus.$on('itemImageLoad', () =>{
        refresh()　　　　　　　　//refresh被执行，每调用一次refresh（），就执行return的函数对象一次，清除之前的定时器，生成新的定时器timer。注：整个debounce不会被重复调用，只是返回函数被多次使用
      })
    },
    methods:{
      debounce(func, delay){
        let timer = null
        // 使用...args 可以传多个参数
        return function (...args) {　　　　　　　　　　// 1. 定义一个返回函数function
          if(timer) clearTimeout(timer)
          timer = setTimeout(() =>{
            func.apply(this, args)
          },delay)
        }
      },
    },