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 相关文章推荐
利用cookie记住背景颜色示例代码
Nov 04 Javascript
将list转换为json失败的原因
Dec 17 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
jQuery回到顶部的代码
Jul 09 Javascript
angular.js 路由及页面传参示例
Feb 24 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
May 14 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
Dec 23 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
用Socket发送电子邮件
2006/10/09 PHP
PHP中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
Codeigniter中mkdir创建目录遇到权限问题和解决方法
2014/07/25 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
php实现微信公众号无限群发
2015/10/11 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
微信js-sdk界面操作接口用法示例
2016/10/12 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
JS设置手机验证码60s等待实现代码
2017/06/14 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
python脚本设置系统时间的两种方法
2016/02/21 Python
python实现音乐下载器
2018/04/15 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
Stylenanda中文站:韩国一线网络服装品牌
2016/12/22 全球购物
初三学生个人自我评定
2014/04/06 职场文书
团委竞选演讲稿
2014/04/24 职场文书
工作会议方案
2014/05/21 职场文书
工作证明英文模板
2014/10/21 职场文书
教务处教学工作总结
2015/08/10 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
keepalived + nginx 实现高可用方案
2022/12/24 Servers