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 相关文章推荐
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 Javascript
jQuery学习之prop和attr的区别示例介绍
Nov 15 Javascript
JS刷新当前页面的几种方法总结
Dec 24 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
深入理解Vuex 模块化(module)
Sep 26 Javascript
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
如何使用Javascript中的this关键字
May 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实现html标签闭合检测与修复方法
2015/07/09 PHP
IE与FireFox中的childNodes区别
2011/10/20 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
JS判断、校验MAC地址的2个实例
2014/05/05 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
2015/03/04 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
浅析JavaScript回调函数应用
2016/05/22 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
JS验证全角与半角及相互转化的介绍
2017/05/18 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
python获得图片base64编码示例
2014/01/16 Python
Python获取远程文件大小的函数代码分享
2014/05/13 Python
Python实现字符串逆序输出功能示例
2017/06/24 Python
Python数据结构之单链表详解
2017/09/12 Python
Python使用requests发送POST请求实例代码
2018/01/25 Python
TensorFlow实现创建分类器
2018/02/06 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
拓展策划方案
2014/06/03 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
经营场所证明范本
2015/06/19 职场文书
初中班长竞选稿
2015/11/20 职场文书
JVM之方法返回地址详解
2022/02/28 Java/Android