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

Posted JackieDYH

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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]
*  例:<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);

 

以上是关于vue自定义防抖&节流指令的实现&全局指令定义和使用-案例的主要内容,如果未能解决你的问题,请参考以下文章

vue中自定义指令组件化生命周期节流和防抖获取DOMmint-ui简介过渡和动画

vue防抖节流之v-debounce--throttle使用指南

同源跨域 + JSONP + 防抖节流

vue节流全局指令超级简单

防抖和节流啥区别,实现一个防抖和节流

Vue入门基础—— 动态组件&插槽&自定义指令