一招实现vue防抖、节流，超容易上手 不看就后悔啦 千万别错过

1、Vue自定义指令实现防抖函数

 所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

在Js中防抖函数的使用：

function debounce(fn,delay){
    let time = null 
    return function() {
        if(time){
            clearTimeout(time) 
        }
        timer = setTimeout(fn,delay) 
    }
}

而在Vue中我们可以使用自定义指令（Vue.directive）来实现 ，不懂的朋友可以看看Vue官网，Vue2.x与3.x写法上有所区别，我这里用的是2.x写法

Vue.directive('antiShake', {
    "inserted": function(el, bingding) {
        let time = null;
        /* 添加个点击事件 */
        el.addEventListener('click', function() {
            if (time) {
                /* 清除定时器 */
                clearTimeout(time)
            }
            /*禁用此元素*/
            el.disabled = true
            time = setTimeout(() => {
                /*启用此元素 */
                el.disabled = false;
            }, 500);
        })
    }

})

2、Vue自定义指令实现节流

节流简单来讲，就是指连续触发事件但是在 n 秒中只执行一次函数。

在Js中节流函数的使用：

function throttle(fn,delay){
    let value= true
    return function() {
       if(!value){
           return false 
       }
        value= false
        setTimeout(() => {
            fn()
            value= true;
        }, delay)
    }
}

在Vue中通过自定义指令实现：

Vue.directive('throttle', {
    'inserted': function(el, bind) {
        el.addEventListener('click', function() {
            if (!el.disabled) {
                el.disabled = true
                setTimeout(() => {
                    el.disabled = false
                }, 500);
            }
        })
    }
})

3、最后实现

<van-button
      color="linear-gradient(to right, #39a9ed,#409EFF)"
      class="van-button"
      hairline
      type="info"
      size="normal"
      v-antiShake
      @click="messageClick"
    >
      修改
    </van-button>

只需要在需要用到的地方上使用 v-antiShake 就可以实现，这里以防抖为例子