vue以组件或者插件的形式实现throttle或者debounce

需求

在业务中，会碰到许多点击请求的情况，在请求前改变一个lock变量（在lock变回来之前，点击无效），在请求回调中再改变lock.以确保在，请求回来之前，不会重复请求。或者类似的点击节流业务

实现方式

指令

<div v-for="a in 3" :key="a" v-demo:getData="a">指令</div>
//getData是函数名，a是传入的参数
 directives: {
 demo: {
  bind(el: Element, binding: any, vnode: VNode) {
   const that: any = vnode.context
   // console.log(binding, vnode)
   // console.log(binding.arg, binding.value)
   if (!that[binding.arg].isBind){ // 打上标记，如果已经转换了，就不转了
    that[binding.arg] = deb(that[binding.arg])
    that[binding.arg].isBind = true
   }
   el.addEventListener('click', function T(event: Event): void{
    that[binding.arg](binding.value)
   })
  },
 },
},

组件

子组件

<template>
<div>
 <div @click="senClick">
  <slot></slot>
 </div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
@Component({})
export default class Child extends Vue {
@Prop({ type: Number, default: 500 }) public timeOut!: number; // 时间
@Prop({ type: String, default: 'throttle' }) public type!: string; // 类型
@Prop() public params!: any; // 传入参数
public message: string = 'Hello';
public throttleLock: boolean = false;
public debounceLock: number = 0;
public time: any;
public senClick(): void {
 console.log(this.timeOut, this.type, this.params);
 if (this.type === 'throttle') {
  if (this.throttleLock) {
   return;
  }
  this.throttleLock = true;
  setTimeout(() => {
   this.throttleLock = false;
  }, this.timeOut);
  this.$emit('myClick', this.params);
 } else if (this.type === 'debounce') {
  if (this.debounceLock) {
   clearTimeout(this.debounceLock);
  }
  this.debounceLock = setTimeout(() => {
   this.$emit('myClick', this.params);
  }, this.timeOut);
 } else {
  this.$emit('myClick', this.params);
 }
}
}
</script>

<style scoped lang='stylus'>
div {
width: 100％;
height: 100％;
}
</style>

父组件

<template>
<div class="home">
  <throttle-and-debounce @myClick="getData" :time="500" type="throttle" params="123">
   <div>我是组件内容</div>
  </throttle-and-debounce>
</div>
</template>
import { Component, Vue } from 'vue-property-decorator';
import throttleAndDebounce from '@/components/throttleAndDebounce.vue';
@Component({
components: {
 throttleAndDebounce,
},
})
export default class home extends Vue {
public getData(e: any){
  console.log('异步数据', e)
 }
}

</script>

plugin

函数

function deb(fn: function){
let lock: number
return (e) => {
 if (lock){
  clearTimeout(lock)
 }
 console.log('创建闭包延迟执行')
 lock = setTimeout(() => {
  fn(e)
 }, 1500)
}
}
export {deb}

组件内使用

<template>
<div class="home">
 <div @click="func(123)">function</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import {deb} from '@/assets'
@Component({
components: {
 throttleAndDebounce,
},
})
export default class home extends Vue {
  public beforeCreate(){
    this.func = deb((e: {a: number}) => {
    console.log('this', e)
   })
  }
}
</script>

来源：https://juejin.im/post/5c18a7b7f265da61553ac179