需求

在业务中，会碰到许多点击请求的情况，在请求前改变一个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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。