Vue.js以组件或者插件的形式实现throttle或者debounce

发布于 2020-3-9|

复制链接

摘记: 需求在业务中，会碰到许多点击请求的情况，在请求前改变一个lock变量(在lock变回来之前，点击无效)，在请求回调中再改变lock.以确保在，请求回来之前，不会重复请求。或者类似的点击节流业务实现方式

指令

```xhtml

指令

//getData是函数名，a是传入的参数

directives: ..

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

```xhtml

指令

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

})

},

},

},

```

组件子组件

```javascript

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

}

}

}

div {

width: 100%;

height: 100%;

}

```

父组件

```javascript

我是组件内容

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)

}

}

```

plugin函数

```javascript

function deb(fn: function){

let lock: number

return (e) => {

if (lock){

clearTimeout(lock)

}

console.log('创建闭包延迟执行')

lock = setTimeout(() => {

fn(e)

}, 1500)

}

}

export {deb}

```

组件内使用

```javascript

function

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)

})

}

}

```