vue 自定义指令节流防抖

防抖(debounce)：在第一次触发事件时，不立即执行函数，在某个特定的时间之后执行，下一次触发重新计数，计数结束执行函数。

Vue.directive('debounce', {
    inserted: function (el, binding) {
        let timer, flag;
        el.addEventListener('click', () => {
            if (!flag) {
                flag = true;
                timer && clearTimeout(timer);
                timer = setTimeout(() => {
                    typeof binding.value === 'function' && binding.value();
                    flag = false;
                }, 2000) //可通过指令传值设置计时时间
            }
        })
    }
})

节流(throttle)：在第一次触发事件时，函数立即执行。下一次触发在上一次计时之后立即执行。

Vue.directive('throttle', {
    inserted: function (el, binding) {
        let timer, flag;
        el.addEventListener('click', () => {
            if (!flag) {
                flag = true;
                typeof binding.value === 'function' && binding.value();
                timer && clearTimeout(timer);
                timer = setTimeout(() => {
                    flag = false;
                }, 2000)
            }
        })
    }
})