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控制表格隔行变色
Jun 26 Javascript
B/S开发中常用javaScript技术与代码
Mar 09 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
吐槽一下我所了解的Node.js
Oct 08 Javascript
基于jPlayer三分屏的制作方法
Dec 21 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 Javascript
用webpack4开发小程序的实现方法
Jun 04 Javascript
React实现全选功能
Aug 25 Javascript
three.js显示中文字体与tween应用详析
Jan 04 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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
IE不支持getElementsByClassName最终完美解决方案
2012/12/17 Javascript
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
react-native动态切换tab组件的方法
2018/07/07 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
vscode自定义vue模板的实现
2021/01/27 Vue.js
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
Python函数返回不定数量的值方法
2019/01/22 Python
Python opencv实现人眼/人脸识别以及实时打码处理
2019/04/29 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
python字典按照value排序方法
2020/12/28 Python
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
社区端午节活动方案
2014/01/28 职场文书
小学中秋节活动方案
2014/02/06 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
工人先进事迹材料
2014/12/26 职场文书
自书遗嘱范文
2015/08/07 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js