节流

通过模块实现时间戳版节流

:::details directive>throttle>index.js

import Vue from 'vue';
import throttle from "./throttle";
const install = function(Vue) {
  Vue.directive("throttle", throttle);
};
if (window.Vue) {
  window["throttle"] = throttle;
  Vue.use(install);
}
throttle.install = install;
export default throttle;

:::

:::details directive>throttle>throttle.js

function throttle(fn, wait) {
  let old = 0;
  return function() {
    /**
     *@description:获取执行函数的this指向
     */
    let self = this;
    /**
     *@description:获取执行函数的参数
     */
    let args = arguments;
    /**
     *@description:获取现在的时间戳
     */
    let now = new Date().valueOf();
    if (now - old > wait) {
      fn.apply(self, args);
      old = now;
    }
  };
}
export default {
  bind(el, binding) {
    /**
     *@description:指令传参数和指令不传参数的情况
     */
    if (binding.value instanceof Array) {
      const [func, time = 500] = binding.value;
      el.execFun = throttle(func, time);
    } else {
      el.execFun = throttle(binding.value, 500);
    }
    el.addEventListener("click", el.execFun);
  },
  unbind(el) {
    el.removeEventListener("click", el.execFun);
  },
};

:::

:::details app.vue

<template>
  <div id="app">
    <button v-throttle="[() => handler('张文强'), 3000]">测试</button>
  </div>
</template>

<script>
import throttle from "./directive/throttle";
export default {
  name: "App",
  directives: {
    throttle
  },
  methods: {
    handler() {
      console.log("张文强");
    },
  },
};
</script>

:::

通过模块实现定时器版节流

:::details directive>throttle>index.js

import Vue from 'vue';
import throttle from "./throttle";
const install = function(Vue) {
  Vue.directive("throttle", throttle);
};
if (window.Vue) {
  window["throttle"] = throttle;
  Vue.use(install);
}
throttle.install = install;
export default throttle;

:::

:::details directive>throttle>throttle.js

function throttle(fn, wait) {
    let timer;
    return function() {
        /**
         * @description:获取执行函数的 this 指向
         */
        let self = this;
        /**
         * @description:获取执行函数的 参数
         */
        let args = arguments;
        if (!timer) {
            timer = setTimeout(() => {
                clearTimeout(timer);
                /**
                 * @description: timer 用完置为 null ,防止内存泄漏
                 */
                timer = null;
                fn.apply(self, args);
            }, wait);
        }
    };
}
export default {
  bind(el, binding) {
    /**
     *@description:指令传参数和指令不传参数的情况
     */
    if (binding.value instanceof Array) {
      const [func, time = 500] = binding.value;
      el.execFun = throttle(func, time);
    } else {
      el.execFun = throttle(binding.value, 500);
    }
    el.addEventListener("click", el.execFun);
  },
  unbind(el) {
    el.removeEventListener("click", el.execFun);
  },
};

:::

:::details app.vue

<template>
  <div id="app">
    <button v-throttle="[() => handler('张文强'), 3000]">测试</button>
  </div>
</template>

<script>
import throttle from "./directive/throttle";
export default {
  name: "App",
  directives: {
    throttle
  },
  methods: {
    handler() {
      console.log("张文强");
    },
  },
};
</script>

:::

通过模块实现双剑合璧版节流

:::details directive>throttle>index.js

import Vue from 'vue';
import throttle from "./throttle";
const install = function(Vue) {
  Vue.directive("throttle", throttle);
};
if (window.Vue) {
  window["throttle"] = throttle;
  Vue.use(install);
}
throttle.install = install;
export default throttle;

:::

:::details directive>throttle>throttle.js

function throttle(fn, wait) {
    let timer;
    let old = 0;
    return function() {
        /**
         * @description:获取执行函数的 this 指向
         */
        let self = this;
        /**
         * @description:获取执行函数的 参数
         */
        let args = arguments;
        /**
         * @description:获取现在的时间戳
         */
        let now = new Date().valueOf();
        if (now - old > wait) {
        if (timer) {
            clearTimeout(timer);
            timer = null;
        }
        fn.apply(self, args);
        old = now;
        } else if (!timer) {
        timer = setTimeout(() => {
            old = new Date().valueOf();
            timer = null;
            clearTimeout(timer);
            fn.apply(self, args);
        }, wait);
        }
    };
}
export default {
  bind(el, binding) {
    /**
     *@description:指令传参数和指令不传参数的情况
     */
    if (binding.value instanceof Array) {
      const [func, time = 500] = binding.value;
      el.execFun = throttle(func, time);
    } else {
      el.execFun = throttle(binding.value, 500);
    }
    el.addEventListener("click", el.execFun);
  },
  unbind(el) {
    el.removeEventListener("click", el.execFun);
  },
};

:::

:::details app.vue

<template>
  <div id="app">
    <button v-throttle="[() => handler('张文强'), 3000]">测试</button>
  </div>
</template>

<script>
import throttle from "./directive/throttle";
export default {
  name: "App",
  directives: {
    throttle
  },
  methods: {
    handler() {
      console.log("张文强");
    },
  },
};
</script>

:::

通过组件实现时间戳版节流

:::details utils>index.js

export function throttle(fn, wait) {
    let old = 0;
    return function() {
        let now = new Date().valueOf();
        /**
         * @description:获取执行函数的 this 指向
         */
        let self = this;
        /**
         * @description:获取执行函数的 参数
         */
        let args = arguments;
        if (now - old > wait) {
            fn.apply(self, args);
            old = now;
        }
    };
}

:::

:::details app.vue

<template>
  <div id="app">
    <button v-throttle="[() => handler('张文强'), 3000]">测试</button>
  </div>
</template>

<script>
import { throttle } from "./utils";
export default {
  name: "App",
  directives: {
    throttle: {
      bind(el, binding) {
        /**
         *@description:指令传参数和指令不传参数的情况
         */
        if (binding.value instanceof Array) {
          const [func, time = 500] = binding.value;
          el.execFun = throttle(func, time);
        } else {
          el.execFun = throttle(binding.value, 500);
        }
        el.addEventListener("click", el.execFun);
      },
      unbind(el) {
        el.removeEventListener("click", el.execFun);
      },
    },
  },
  methods: {
    handler() {
      console.log("张文强");
    },
  },
};
</script>

:::

通过组件实现定时器版节流

:::details utils>index.js

export function throttle(fn, wait) {
    let timer;
    return function() {
        /**
         * @description:获取执行函数的 this 指向
         */
        let self = this;
        /**
         * @description:获取执行函数的 参数
         */
        let args = arguments;
        if (!timer) {
            timer = setTimeout(() => {
                clearTimeout(timer);
                /**
                 * @description: timer 用完置为 null ,防止内存泄漏
                 */
                timer = null;
                fn.apply(self, args);
            }, wait);
        }
    };
}

:::

:::details app.vue

<template>
  <div id="app">
    <button v-throttle="[() => handler('张文强'), 3000]">测试</button>
  </div>
</template>

<script>
import { throttle } from "./utils";
export default {
  name: "App",
  directives: {
    throttle: {
      bind(el, binding) {
        /**
         *@description:指令传参数和指令不传参数的情况
         */
        if (binding.value instanceof Array) {
          const [func, time = 500] = binding.value;
          el.execFun = throttle(func, time);
        } else {
          el.execFun = throttle(binding.value, 500);
        }
        el.addEventListener("click", el.execFun);
      },
      unbind(el) {
        el.removeEventListener("click", el.execFun);
      },
    },
  },
  methods: {
    handler() {
      console.log("张文强");
    },
  },
};
</script>

:::

通过组件实现双剑合璧版节流

:::details utils>index.js

export function throttle(fn, wait) {
let timer;
    let old = 0;
    return function() {
        /**
         * @description:获取执行函数的 this 指向
         */
        let self = this;
        /**
         * @description:获取执行函数的 参数
         */
        let args = arguments;
        /**
         * @description:获取现在的时间戳
         */
        let now = new Date().valueOf();
        if (now - old > wait) {
        if (timer) {
            clearTimeout(timer);
            timer = null;
        }
        fn.apply(self, args);
        old = now;
        } else if (!timer) {
        timer = setTimeout(() => {
            old = new Date().valueOf();
            timer = null;
            clearTimeout(timer);
            fn.apply(self, args);
        }, wait);
        }
    };
}

:::

:::details app.vue

<template>
  <div id="app">
    <button v-throttle="[() => handler('张文强'), 3000]">测试</button>
  </div>
</template>

<script>
import { throttle } from "./utils";
export default {
  name: "App",
  directives: {
    throttle: {
      bind(el, binding) {
        /**
         *@description:指令传参数和指令不传参数的情况
         */
        if (binding.value instanceof Array) {
          const [func, time = 500] = binding.value;
          el.execFun = throttle(func, time);
        } else {
          el.execFun = throttle(binding.value, 500);
        }
        el.addEventListener("click", el.execFun);
      },
      unbind(el) {
        el.removeEventListener("click", el.execFun);
      },
    },
  },
  methods: {
    handler() {
      console.log("张文强");
    },
  },
};
</script>

:::