需求

在業(yè)務(wù)中，會碰到許多點(diǎn)擊請求的情況，在請求前改變一個lock變量（在lock變回來之前，點(diǎn)擊無效），在請求回調(diào)中再改變lock.以確保在，請求回來之前，不會重復(fù)請求。或者類似的點(diǎn)擊節(jié)流業(yè)務(wù)

實現(xiàn)方式

指令

 <div v-for="a in 3" :key="a" v-demo:getData="a">指令</div> //getData是函數(shù)名，a是傳入的參數(shù)  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){ // 打上標(biāo)記，如果已經(jīng)轉(zhuǎn)換了，就不轉(zhuǎn)了     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; // 傳入?yún)?shù) 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>我是組件內(nèi)容</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('異步數(shù)據(jù)', e)  }}</script>

plugin

函數(shù)

function deb(fn: function){ let lock: number return (e) => {  if (lock){   clearTimeout(lock)  }  console.log('創(chuàng)建閉包延遲執(zhí)行')  lock = setTimeout(() => {   fn(e)  }, 1500) }}export {deb}