vue自定义防抖&节流指令的实现&全局指令定义和使用-案例

Posted 2021-09-01 JackieDYH

出于业务需求需要做按钮的点击防抖，开始的打算是二次封装 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]
*  例：<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]
*  例：<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)
    })
  }
})

---

Vue全局指令定义和使用

plugin.js

/*
 * @Author: Jackie
 * @Date: 2021-08-03 17:48:25
 * @LastEditTime: 2021-08-05 15:45:15
 * @LastEditors: Jackie
 * @Description: Vue
 * @version: 
 */
export default {
    install(Vue, Options) {
        // 添加属性与方法
        //这里我写的$testProp等加了$符号的，表示他为vue全局的，但实际上不加也可以的，访问时也不加就行了
        Vue.prototype.$myoption = '我是来自插件的属性',
            Vue.prototype.$myfn = function () {
                console.log('我是来自插件的方法')
            }
        // 添加全局混入
        Vue.mixin({
            mounted() {
                console.log('组件创建成功')
            },
        })
        // 添加全局过滤器
        Vue.filter('ellipsTexts', (text, num) => {
            if (text) {
                if (text.length > num) {
                    return text.substring(0, num) + '...';
                } else {
                    return text;
                }
            } else {
                return text;
            }
        })
        // 添加全局指令 只能输入数字 v-number-only
        Vue.directive('numberOnly', {
            bind(el) {
                el.handler = function () {
                    el.value = el.value.replace(/\\D+/, '');
                };
                el.addEventListener('input', el.handler);
            },
            unbind(el) {
                el.removeEventListener('input', el.handler);
            }
        })
        /***
        * 防抖 单位时间只触发最后一次
        *  @param {?Number|300} time - 间隔时间
        *  @param {Function} fn - 执行事件
        *  @param {?String|"click"} event - 事件类型 例："click"
        *  @param {Array} binding.value - [fn,event,time]
        *  例：<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)
                })
            }
        })
        /***
        *  节流 每单位时间可触发一次
        *  第一次瞬间触发，最后一次不管是否达到间隔时间依然触发
        * 【考虑到input的change事件】
        *  @param {?Number|300} time - 间隔时间
        *  @param {Function} fn - 执行事件
        *  @param {?String|"click"} event - 事件类型 例："click"
        *  @param {Array} binding.value - [fn,event,time]
        *  例：<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)
                })
            }
        })
    }
}

main.js使用

// 使用自定义插件
import plugin from '@/utils/plugin';
Vue.use(plugin);