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 相关文章推荐
Jquery index()方法 获取相应元素索引值
Oct 12 Javascript
用客户端js实现带省略号的分页
Apr 27 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
jQuery中delegate()方法用法实例
Jan 19 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
Jul 14 Javascript
详解动画插件wow.js的使用方法
Sep 13 Javascript
vue .sync修饰符的使用详解
Jun 15 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 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
discuz的php防止sql注入函数
2011/01/17 PHP
php实现json编码的方法
2015/07/30 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
js获取url中&quot;?&quot;后面的字串方法
2014/05/15 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
利用python批量修改word文件名的方法示例
2017/10/17 Python
python导入模块交叉引用的方法
2019/01/19 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
.NET面试问题集
2015/12/08 面试题
教育学习自我评价
2014/02/03 职场文书
中文专业学生自我评价范文
2014/02/06 职场文书
土地租赁协议书
2015/01/29 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
老公保证书怎么写
2015/02/26 职场文书
Python time库的时间时钟处理
2021/05/02 Python
MySQL系列之十一 日志记录
2021/07/02 MySQL