Vue中使用自定义指令实现防抖节流

个人在vue中使用防抖中一般会绑定vm实例做定时器的绑定对象,大家也可以根据自己的实际需求修改防抖节流的函数

//'@/utils/debounce.js' 文件


function throttle(bindObj, fn, delay) {
	bindObj.$$prevTime = Date.now()
	return function(...args) {
		const nowTime = Date.now()
		if(nowTime - bindObj.$$prevTime > delay) {
			fn.apply(this, args)
			bindObj.$$prevTime = nowTime
		}
	}
}

function debounce(bindObj, fn, delay) {
	return function(...args) {
		bindObj.$$timer && clearTimeout(bindObj.$$timer)
		bindObj.$$timer = setTimeout(() => {
			fn.apply(this, args)
		}, delay)
	}
}

export {
	debounce,
	throttle
}

// '@/plugin/index.js'文件

import Vue from 'vue'
import { debounce, throttle } from '@/utils/debounce'

Vue.directive('debounce', {
	bind(el, binding, vnode) {
		const [emit, fn, delay=1000] = binding.value
		el.addEventListener(emi