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

这篇文章主要介绍了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} 

组件内使用

   function

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

以上就是vue以组件或者插件的形式实现throttle或者debounce的详细内容，更多请关注本站其它相关文章！