Vue的click事件防抖和节流处理详解


Posted in Javascript onNovember 13, 2019

函数防抖

定义:多次触发事件后,事件处理函数只执行一次,并且是在触发操作结束时执行。

在vue中对click添加防抖处理

const on = Vue.prototype.$on
// 防抖处理
Vue.prototype.$on = function (event, func) {
  let timer
  let newFunc = func
  if (event === 'click') {
    newFunc = function () {
      clearTimeout(timer)
      timer = setTimeout(function () {
        func.apply(this, arguments)
      }, 500)
    }
  }
  on.call(this, event, newFunc)
}

函数节流

定义:触发函数事件后,短时间间隔内无法连续调用,只有上一次函数执行后,过了规定的时间间隔,才能进行下一次的函数调用。

在vue中对click添加节流处理

const on = Vue.prototype.$on
 
// 节流
Vue.prototype.$on = function (event, func) {
  let previous = 0
  let newFunc = func
  if (event === 'click') {
    newFunc = function () {
      const now = new Date().getTime()
      if (previous + 1000 <= now) {
        func.apply(this, arguments)
        previous = now
      }
    }
  }
  on.call(this, event, newFunc)
}

以上这篇Vue的click事件防抖和节流处理详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
详解使用路由延迟加载 Angular 模块
Oct 12 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
JS如何获取地址栏的参数实例讲解
Oct 06 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
vue表单数据交互提交演示教程
Nov 13 #Javascript
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 #Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 #Javascript
基于vue-cli3和element实现登陆页面
Nov 13 #Javascript
vue data引入本地图片的两种方式小结
Nov 13 #Javascript
vue中的 $slot 获取插槽的节点实例
Nov 12 #Javascript
解决vue v-for src 图片路径问题 404
Nov 12 #Javascript
You might like
php实现将上传word文件转为html的方法
2015/06/03 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
jquery分页对象使用示例
2014/04/01 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
浅析Python中signal包的使用
2015/11/13 Python
python实现数据写入excel表格
2018/03/25 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
Python正则匹配判断手机号是否合法的方法
2020/12/09 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
浅谈python量化 双均线策略(金叉死叉)
2020/06/03 Python
keras实现多种分类网络的方式
2020/06/11 Python
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
简历中自我评价分享
2013/10/09 职场文书
大学生职业生涯规划书模版
2013/12/30 职场文书
讲解员培训方案
2014/05/04 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
党支部评议意见
2015/06/02 职场文书