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同时按下两个方向键
Dec 01 Javascript
JavaScript 拖拉缩放效果
Dec 10 Javascript
js select常用操作控制代码
Mar 16 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
Jun 18 Javascript
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
超炫的jquery仿flash导航栏特效
Nov 11 Javascript
轻量级javascript 框架Backbone使用指南
Jul 24 Javascript
微信小程序 scroll-view组件实现列表页实例代码
Dec 14 Javascript
JavaScript运行原理分析
Feb 09 Javascript
详解Node.js读写中文内容文件操作
Oct 10 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
浅析JavaScript中的变量提升
Jun 01 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
Apache设置虚拟WEB
2006/10/09 PHP
缓存技术详谈―php
2006/12/14 PHP
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
php获取客户端电脑屏幕参数的方法
2015/01/09 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
2012/09/14 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
js中的cookie的读写操作示例详解
2014/04/17 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
JavaScript中Function()函数的使用教程
2015/06/04 Javascript
javascript合并表格单元格实例代码
2016/01/03 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
python 数据加密代码
2008/12/24 Python
Python文件操作类操作实例详解
2014/07/11 Python
详解tensorflow训练自己的数据集实现CNN图像分类
2018/02/07 Python
详解Python 正则表达式模块
2018/11/05 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
美国购买和销售礼品卡平台:Raise
2017/01/13 全球购物
办公室综合文员岗位职责范本
2014/02/13 职场文书
《埃及的金字塔》教学反思
2014/04/07 职场文书
2014年安全生产责任书
2014/07/22 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
公司慰问信范文
2015/03/23 职场文书
2015年体育部工作总结
2015/04/02 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang
Python一些基本的图像操作和处理总结
2021/06/23 Python
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS