vue 自定义防抖/节流指令的实现

前言

出于业务需求需要做按钮的点击防抖，开始的打算是二次封装 element-ui的el-button来实现的，然后就做了，但又觉得这样不够简洁，然后就看看广大的掘友大都是怎么做的呢，关于防抖节流的处理，发现大家都是用vue自定义指令做的，看了看vue自定义指令也不麻烦，便自己动手也撸一个，如下

v-debounce

一丶需求

• 按钮点击防抖 例：刷新当前组件并重新请求
• 搜索框输入搜索，待输入停止后开始搜索
• 以其其他可能需求

二丶思路

• 监听指定事件，事件被触发后清除之前事件 => 可选有定时器/时间戳
• 需要监听的事件可能会改变，因此需提取为变量
• 时间也需要提取为变量
• 防抖后执行的事件也是变量
• 传递参数可选的有数组/对象

三丶选定

• 选定定时器（别问为什么，我也不知道）
• 参数配置选定为数组（简洁一些）

期待参数为 [fn, event, time]

四丶结果

/***
* 防抖 单位时间只触发最后一次
*  @param {?Number|300} time - 间隔时间
*  @param {Function} fn - 执行事件
*  @param {?String|"click"} event - 事件类型 例："click"
*  @param {Array} binding.value - [fn,event,time]
*  @date  2020-1-29
*  @author aChuan
*  例：<el-button v-debounce="[reset,`click`,300]">刷新</el-button>
*  也可简写成：<el-button v-debounce="[reset]">刷新</el-button>
*/
Vue.directive('debounce', {
  inserted: function (el, binding) {
    let [fn, event = "click", time = 300] = binding.value
    let timer
    el.addEventListener(event, () => {
      timer && clearTimeout(timer)
      timer = setTimeout(() => fn(), time)
    })
  }
})

五丶节流

v-throttle 同理可得,如下

/***
*  节流 每单位时间可触发一次
*  第一次瞬间触发，最后一次不管是否达到间隔时间依然触发
* 【考虑到input的change事件】
*  @param {?Number|300} time - 间隔时间
*  @param {Function} fn - 执行事件
*  @param {?String|"click"} event - 事件类型 例："click"
*  @param {Array} binding.value - [fn,event,time]
*  @date  2020-1-31
*  @author aChuan
*  例：<el-button v-throttle="[reset,`click`,300]">刷新</el-button>
*  传递参数则：<el-button v-throttle="[()=>reset(param),`click`,300]">刷新</el-button>
*/
Vue.directive('throttle', {
  inserted: function (el, binding) {
    let [fn, event = "click", time = 300] = binding.value
    let timer, timer_end;
    el.addEventListener(event, () => {
      if (timer) {
        clearTimeout(timer_end);
        return timer_end = setTimeout(() => fn(), time);
      }
      fn();
      timer = setTimeout(() => timer = null, time)
    })
  }
})

萌新记录一下个人脚步，如有错误欢迎斧正，欢迎在评论区留言讨论^_^
如有收获请点个赞吧，球球了，各位好哥哥~好姐姐~们