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

需求

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

实现方式

指令

 指令
 //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)
    })
   },
  },
 },

组件

子组件

div {
 width: 100%;
 height: 100%;
}

父组件

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

函数

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

组件内使用

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