vue 中使用防抖函数组件

初级

1、先写好防抖函数

/**
 * @desc 防抖函数
 * @param {需要防抖的函数} func
 * @param {延迟时间} wait
 * @param {是否立即执行} immediate
 */
export function debounce(func, wait, immediate) {
  let timeout
  
  return function(...args) {
    let context = this
    if (timeout) clearTimeout(timeout)

    if (immediate) {
      let callNow = !timeout
      timeout = setTimeout(function() {
        timeout = null
      }, wait)
      if (callNow) func.apply(context, args)
    } else {
      timeout = setTimeout(function() {
        func.apply(context, args)
      }, wait)
    }
  }
}

2、然后在要使用的组件里 import 进来

import { debounce } from 'xxx'

export default {
	data: {
		return {
			vm: this
		}
	},
	methods: {
		toDoSth: debounce((vm) => {
			// 这里将当前组件实例当参数传入
			// 就可以使用实例中定义的一些属性、方法
			// 补充一下，这里如果换成非箭头函数的写法，也可以直接访问实例。
		}, 
		500, 
		true
		)
	}
}

3、在组件方法中使用

template:

<div @click="toDoSth(vm)"></div>

高级

虽然上面的写法已经能解决问题了，但是总觉得不够美观。
在网上搜索一番，看到有个哥们将防抖封装成一个组件，果然和我想的一样。不过这哥们直接将上下文当参数传进来了，比我把整个实例传进来高明，我在这个基础上添加了 immediate 的功能，还有添加了默认不传 event 参数的情况处理。

debounce.js 文件：

import Vue from 'vue'

const debounce = (func, time, ctx, immediate) => {
  let timer
  const rtn = (...params) => {
    clearTimeout(timer)

    if (immediate) {
      let callNow = !timer
      timer = setTimeout(() => {
        timer = null
      }, time)
      if (callNow) func.apply(ctx, params)
    } else {
      timer = setTimeout(() => {
        func.apply(ctx, params)
      }, time)
    }
  }
  return rtn
}

Vue.component('Debounce', {
  abstract: true,
  props: ['time', 'events', 'immediate'],
  created() {
    this.eventKeys = this.events && this.events.split(',')
  },
  render() {
    const vnode = this.$slots.default[0]
  
    // 如果默认没有传 events，则对所有绑定事件加上防抖
    if (!this.eventKeys) {
      this.eventKeys = Object.keys(vnode.data.on)
    }
    
    this.eventKeys.forEach(key => {
      vnode.data.on[key] = debounce(
        vnode.data.on[key],
        this.time,
        vnode,
        this.immediate
      )
    })

    return vnode
  }
})

使用方式：

1、引入 debounce.js 文件

import 'xxx/debounce.js'

export default {
	methods: {
		toDoSth(e) {
			// 这里正常写就可以了
		}
	}
}

2、在模版里使用。
其中time为必选参数。 event 和 immediate 参数都是可选参数。
如果组件下有多个事件绑定，那么 event 可以自定义需要进行防抖处理的事件。
如果需要立即执行的话，可以将 immediate 参数设置为 true。

<Debounce :time="500" event="click" :immediate="true">
  <button @click="toDoSth($event, 1)">click me</button>
</Debounce>

到此就完成了一次 Debounce 组件的封装。

参考：

最后附上这位哥们的原帖：
https://juejin.im/post/5c2dc7a9e51d4573c8491e77