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


Posted in Javascript onMay 22, 2019

需求

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

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

Javascript 相关文章推荐
[原创]网络复制内容时常用的正则+editplus
Nov 30 Javascript
js 匿名调用实现代码
Jun 19 Javascript
jQuery 使用手册(五)
Sep 23 Javascript
Jquery 动态添加按钮实现代码
May 06 Javascript
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
jQuery对JSON数据进行排序输出的方法
Jun 24 Javascript
javascript中eval解析JSON字符串
Feb 27 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
Dec 30 Javascript
vue监听对象及对象属性问题
Aug 20 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 #Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 22 #Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 #Javascript
详解在React-Native中持久化redux数据
May 22 #Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 #Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
May 22 #Javascript
jQuery Migrate 插件用法实例详解
May 22 #jQuery
You might like
PHP禁止个别IP访问网站
2013/10/30 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
jquery实现marquee效果(文字或者图片的水平垂直滚动)
2013/01/07 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
js clearInterval()方法的定义和用法
2015/11/11 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
Node.js数据库操作之查询MySQL数据库(二)
2017/03/04 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
Python装饰器结合递归原理解析
2020/07/02 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
SQL中where和having的区别
2012/06/17 面试题
在职研究生自我鉴定
2013/10/16 职场文书
2014年服务行业工作总结
2014/11/18 职场文书
商业门面租房协议书
2014/11/25 职场文书
政审证明范文
2015/06/19 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书
导游词之安徽巢湖
2019/12/26 职场文书