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 相关文章推荐
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
js表头排序实现方法
Jan 16 Javascript
判断访客终端类型集锦
Jun 05 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
实例讲解JS中pop使用方法
Jan 27 Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 Javascript
js 函数性能比较方法
Aug 24 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
配置支持SSI
2006/11/25 PHP
PHP 转义使用详解
2013/07/15 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
javascript 对象比较实现代码
2009/04/27 Javascript
JS重载实现方法分析
2016/12/16 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
Python中的zip函数使用示例
2015/01/29 Python
初学Python函数的笔记整理
2015/04/07 Python
在Python中使用第三方模块的教程
2015/04/27 Python
简单介绍Python中的round()方法
2015/05/15 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
详解Python学习之安装pandas
2019/04/16 Python
python中 * 的用法详解
2019/07/10 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
Python中Selenium库使用教程详解
2020/07/23 Python
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
linux面试题参考答案(8)
2015/08/11 面试题
汽车技术服务英文求职信范文
2014/01/02 职场文书
公司部门司机岗位职责
2014/01/03 职场文书
大学校务公开实施方案
2014/03/31 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
六查六看剖析材料
2014/10/06 职场文书
岗位职责范本大全
2015/02/26 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
七年级作文之秋游
2019/10/21 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS