vue自定义指令实现节流函数

在工作的过程中，遇到客户骚操作，导致一起球球重复触发。为了解决这个问题，通过自定义指令实现了防抖函数，为了还替换，这里采用的指令是v-click，间隔时间是默认1s，有时间可以添加设置自定义时间。

先上代码：click.js

该函数，与传统的防抖（1s内触发1次不同），该函数只有在点击事件间隔超过1s才会触发点击事件。若想要改成（1s触发1次的），改变一下  startTime = endTime;的位置即可，原理自行百度

function throttle (fn, time) {

    // console.log('节流');

    // 开始时间

    let startTime = 0;

    // 实际上下面函数就是DOM事件回调函数

    return () => {

        // 结束时间: 调用当前函数的时间

        const endTime = Date.now();

        // fn函数的this指向问题，参数有问题（少event）

        // console.log(startTime, endTime)

        if (endTime - startTime >= time) {

            // 大于1s, 可以触发， 小于1s就不触发

            fn.apply(this, arguments);

            // 重置开始时间

            // startTime = endTime;（1s触发1次的）

        }

        startTime = endTime; （ 间隔超过1s）

    }

}

export default {

    /*

    v-click传参方式 1. v-click=fn 2带参数的函数 v-click:fn="args"

    */    bind: (el, binding, vnode) => {

        let that = vnode.context

        let fn, arg, throttled

        console.log(typeof that[binding.arg] == "function")

        if (typeof that[binding.arg] == "function") {

                fn = function (a) {             

                       return () => {                  

                              that[binding.arg](a) 

                       }   

             }

            arg = binding.value

        } else if (typeof binding.value === "function") {

            fn = function (a) {

                return binding.value

            }

        } else {

            alert('请检查参数是否正确')

            return

        }

        throttled = throttle(fn(arg), 1000)

        console.log(throttled)

        el.addEventListener("click", function () {

            throttled()

        }, false)

    }

}

第二个文件index.js

定义了插件，已插件的方式给vue安装

import click from './click'

const install = Vue => {

  Vue.directive('click', click)

}

/*

  Vue.use( plugin )

  安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。

  如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

  该方法需要在调用 new Vue() 之前被调用。

  当 install 方法被同一个插件多次调用，插件将只会被安装一次。

*/

if (window.Vue) {

  window['click'] = click

  Vue.use(install); // eslint-disable-line

}

click.install = install

export default click

3 修改main.js

在文件中引入index.js，并vue.use(click)即可