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

 更新时间:2019年05月22日 09:24:51   作者:虚光  
这篇文章主要介绍了vue以组件或者插件的形式实现throttle或者debounce,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

需求

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

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

相关文章

  • 详解webpack打包vue时提取css

    详解webpack打包vue时提取css

    本篇文章主要介绍了详解webpack打包vue时提取css,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • Vue 中获取当前时间并实时刷新的实现代码

    Vue 中获取当前时间并实时刷新的实现代码

    这篇文章主要介绍了Vue 中获取当前时间并实时刷新,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • 基于Vue中点击组件外关闭组件的实现方法

    基于Vue中点击组件外关闭组件的实现方法

    下面小编就为大家分享一篇基于Vue中点击组件外关闭组件的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue.js轮播图走马灯代码实例(全)

    Vue.js轮播图走马灯代码实例(全)

    这篇文章主要介绍了Vue.js轮播图走马灯,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue-cli的eslint相关用法

    vue-cli的eslint相关用法

    本篇文章主要介绍了vue-cli的eslint相关用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue自定义指令和动态路由实现权限控制

    vue自定义指令和动态路由实现权限控制

    这篇文章主要介绍了vue自定义指令和动态路由实现权限控制的方法,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下
    2020-08-08
  • vue页面使用阿里oss上传功能的实例(二)

    vue页面使用阿里oss上传功能的实例(二)

    本篇文章主要介绍了vue页面使用阿里oss上传功能的实例(二),主要介绍OSS管理控制台设置访问权限、角色等,有兴趣的可以了解一下
    2017-08-08
  • Vuejs第十篇之vuejs父子组件通信

    Vuejs第十篇之vuejs父子组件通信

    这篇文章主要介绍了Vuejs第十篇之vuejs父子组件通信的相关资料,本文介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • 详解vue高级特性

    详解vue高级特性

    这篇文章主要介绍了vue高级特性的相关知识,文中介绍非常细致,帮助大家更好的参考和学习,感兴趣的朋友可以了解下
    2020-06-06
  • Sublime Text新建.vue模板并高亮(图文教程)

    Sublime Text新建.vue模板并高亮(图文教程)

    这篇文章主要介绍了Sublime Text新建.vue模板并高亮(图文教程),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10

最新评论