vue以組件或者插件的形式實現(xiàn)throttle或者debounce

更新時間：2019年05月22日 09:24:51 作者：虛光

這篇文章主要介紹了vue以組件或者插件的形式實現(xiàn)throttle或者debounce，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

需求

在業(yè)務中，會碰到許多點擊請求的情況，在請求前改變一個lock變量（在lock變回來之前，點擊無效），在請求回調中再改變lock.以確保在，請求回來之前，不會重復請求?；蛘哳愃频狞c擊節(jié)流業(yè)務

實現(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){ // 打上標記，如果已經轉換了，就不轉了
     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>我是組件內容</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}

組件內使用

<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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: