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

冷不防 2022-09-03 04:28 385阅读 0赞

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

![20210805154016203.gif][]

###  五丶节流 ###

> 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);

[20210805154016203.gif]: /images/20220829/f1d304a2cfaa4a92af221b457c1b137e.png