With vUE custom instructions to achieve the anti – shake throttling

Implementation of V-Debounce and V-Throttle

// Implement the anti-shake function
const debouce = function (func, wait, immdiate) {
       // Process the parameters
       if (typeoffunc ! = ="function") return;
       if (typeofwait ! = ="number") {
           if (typeof wait === "boolean") { immdiate = wait; }}if (typeof wait === "undefined") {
           wait = 500;
       }
       if (typeof immdiate === "undefined") {
           immdiate = false;
       }
       let timer = null,
           result;

       return function proxy(. arg) {
           let self = this;
           letnow = immdiate && ! timer ?true : false;
           // Clear the timer
           clearTimeout(timer);
           timer = setTimeout(function () {
               timer = null;
               // When executing func, make sure this is a Dom element and that the argument to be entered has an event objectresult = ! immdiate ? func.call(self, ... arg) :null; }, wait); result = now ? func.call(self, ... arg) :null;
           return result
       };
   };
   // Implementation of throttling function
   const throttle = function throttle(func, interval) {
       // Initialize the parameters
       if (typeoffunc ! = ="function") return;
       if (typeof interval === "undefined") {
           interval = 500;
       }
       let pre = 0.// The time of the last trigger
           timer = null;
       return function (. args) {
           let now = new Date(),
               self = this;
           let remaining = interval - (now - pre);
           // if the interval between two triggers is greater than 500ms== the command is executed immediately
           if (remaining <= 0) {
               clearTimeout(timer);
               timer = null; // Next time if the number does not exceed 500, the timer can be executedpre = now; func.call(self, ... args); }else if(! timer) {// The interval between two triggers is less than 500ms=="
               timer = setTimeout(() = > {
                   clearTimeout(timer); // If the interval is less than 500ms and the waiting time is triggered once, clear the timer
                   timer = null;
                   pre = new Date(a); func.call(self, ... args); }, remaining); }}; };let config = {
       bind(el, binding) {
           let wait = 200,
               val = binding.value,
               immediate = false,
               func,
               type = 'click',
               params = [],
               handle = binding.name === 'debounce' ? debouce : throttle
           if (val == null) return
           if (typeofval ! = ='function' && typeofval ! = ='object') return
           if (binding.arg) {
               wait = + binding.arg;
           }

           if (binding.modifiers && binding.modifiers.immdiate) immediate = binding.modifiers.immdiate;
           if (typeof val === 'function') {
               func = val;
           }
           if (typeof val === 'object') {
               func = val.func || function () {}; type = val.type ||'click';
               params = val.params || []
           }
           el.$type = type;
           el.$handle = handle(function proxy(arg) {
               return func.call(this. params.concat(arg)) }, wait, immediate) el.addEventListener(el.$type, el.$handle)/ / judgment have passed wait, immdiate, the params, func
       },
       unbind(el) {
           el.removeEventListener(el.$type, el.$handle)

       }
   }
   Vue.directive('debounce', config)
   Vue.directive('throttle', config)

Copy the code

use

<template> <div id="app"> <button v-debounce:3000.immdiate="{ func: fn, params: [2, 3], type: </button> <button v-throttle:1000="{func: fn, params: [10, 20],}" > </button> </div> </template> <script> export default {name: "App", data() {return {}; }, methods: { fn(a, b) { console.log(a, b); ,}}}; </script>Copy the code