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

函数防抖

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

在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事件防抖和节流处理详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于Vue中使用节流Lodash throttle详解

    在Vue中使用 Lodash.throttle 来做节流 在Vue中,有时需要对ajax请求提交进行节流操作.这时候,如果页面在请求成功之后会跳转,使用vue指令once或者加载一个loading遮罩禁止点击即可,但如果请求之后不跳转,并且loading不适用时,需要通过其他方式来实现节流,比如通过标识位判断等,这里我们着重说一下如何通过lodash.throttle来实现节流 lodash lodash是一个广受欢迎的js工具库,其中包含了各种各样的工具函数,方便开发时不需要反复造轮子,更关注

  • Vue最新防抖方案(必看篇)

    函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时.举个栗子,持续触发scroll事件时,并不执行handle函数,当1000毫秒内没有触发scroll事件时,才会延时触发scroll事件. 函数节流(throttle):当持续触发事件时,保证一定时间段内只调用一次事件处理函数.节流通俗解释就比如我们水龙头放水,阀门一打开,水哗哗的往下流,秉着勤俭节约的优良传统美德,我们要把水龙头关小点,

  • 在vue+element ui框架里实现lodash的debounce防抖

    事情起因在:我使用element ui框架里的远程搜索框,在单选时,组件内部已经做了防抖,query是在一段时间内的字符串.但是在多选时,并没有做防抖,而是每输入一个字符都要向后台发一次请求,所以必须防抖,官方推荐使用lodash的debounce 在解决这个问题时,我遇到的坎儿主要有以下: 我首先在项目里用npm安装lodash,先全局安装,然后安装到项目 npm install -g lodash npm install --save lodash 安装后,我就在我要用防抖的组件里,引入lo

  • vue之debounce属性被移除及处理详解

    vue 2.0 debounce已经被移除 参考文档: https://cn.vuejs.org/v2/guide/migration.html#替换-debounce-过滤器 https://vuejs.org/v2/guide/migration.html#debounce-Param-Attribute-for-v-model-removed 完整代码: <!DOCTYPE html> <html lang="en"> <head> <m

  • 浅谈VUE防抖与节流的最佳解决方案(函数式组件)

    浅谈VUE防抖与节流的最佳解决方案(函数式组件)

    前言 有echarts使用经验的同学可能遇到过这样的场景,在window.onresize事件回调里触发echartsBox.resize()方法来达到重绘的目的,resize事件是连续触发的这意味着echarts实例会连续的重绘这是非常耗性能的.还有一个常见的场景在input标签的input事件里请求后端接口,input事件也是连续触发的,假设我输入了"12"就会请求两次接口参数分别是"1"和"12",比浪费网络资源更要命的是如果参数为&quo

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

    函数防抖 定义:多次触发事件后,事件处理函数只执行一次,并且是在触发操作结束时执行. 在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 = s

  • 对Vue.js之事件的绑定(v-on: 或者 @ )详解

    1.Vue.js事件绑定的一般格式 v-on:click='function' v-on:click/mouseout/mouseover/ @click 2.Vue.js事件绑定的实现 2.1 JavaScript代码 <script type="text/javascript" src="../js/vue-1.0.21.js"></script> <script type="text/javascript"&g

  • vue实现绑定事件的方法实例代码详解

    一.前言 vuejs中的事件绑定,使用<v-on:事件名 = 函数名>来完成的,这里函数名是定义在Vue实例中的methods对象中的,Vue实例可以直接访问其中的方法. 二.事件绑定方式 1. 直接在标签中写js方法  <button v-on:click="alert('hi')">执行方法的第一种写法</button> 2.调用method的办法 <button v-on:click="run()">执行方法的第

  • Vue组件中使用防抖和节流实例分析

    在监听频繁触发的事件时,一定要多加小心,比如 用户在输入框打字.窗口大小调整.滚动.Intersection Observer 事件. 这些事件总是被频繁触发,可能 几秒一次.如果针对每次事件都发起 fetch 请求(或类似的行为),那显然是不明智的. 我们需要做的就是减缓事件处理程序的执行速度.这种缓冲技术就是 防抖(debounce) 和 节流(throttle) . 1. 观察者 防抖 我们先从一个简单的组件开始,我们的任务是 将用户输入到 文本框中的文本 输出到控制台: <templat

  • Vue触发隐藏input file的方法实例详解

    1.使用input透明覆盖法 将input的z-index设置为1以上的数字并覆盖到需点击的内容上,将input的样式opacity设置为0(即为透明度为0),这样通过绑定在input上的change事件触发     ----推荐 <p class="uploadImg"> <input type="file" @change="picUpload($event)" accept="image/*" />

  • Vue.js 中的 v-show 指令及用法详解

    1 用法 v-show 指令通过改变元素的 css 属性(display)来决定元素是显示还是隐藏. html: <div id="app"> <p v-show="type==='科技'">大数据之下的锦鲤:为什么你的微博总抽不到奖</p> </div> js: <script> var app = new Vue({ el: '#app', data: { type:'技术' } }); </sc

  • vue和better-scroll实现列表左右联动效果详解

    一.实现思路 (1)实现上是左右分别一个better-scroll列表 (2)利用计算右侧列表每一个大区块的高度来计算左侧的位置 二.实现 1.实现左右两个better-scroll (1)dom结构(better-scroll要求,会把最外层dom的第一个子元素作为要滚动的区域) 左边滚动列表dom <div class="menu-wrapper" v-el:menu-wrapper> <ul> <li v-for="item in good

  • Vue子组件调用父组件方法案例详解

    一.直接在子组件中通过this.$parent.event来调用父组件的方法 <!-- 父组件 --> <template> <div> <child></child> </div> </template> <script> import child from '~/components/dam/child'; export default { components: { child }, methods: {

  • Vue实现contenteditable元素双向绑定的方法详解

    Vue实现contenteditable元素双向绑定的方法详解

    目录 前言 contenteditable 基础使用 进阶使用 总结 前言 如何实现一个即时通讯的聊天页面,网上有很多的开源或不开源的成品,可以直接使用,或者简单修改后使用.但在实际项目中,直接使用开源的即时通讯往往不是我们想要的,如何自己开发一个聊天页面呢.本文就着学习的目的,从0开始一步步实现一个聊天框的开发,至于消息的发送和接收,这个就得依靠后端大佬了. 在开发前,首先得明确用什么来实现.用input输入框和textare文本输入肯定是不行的,这两个只能输入文本类数据(输入法表情也算),想

  • Vue指令实现大屏元素分辨率适配详解

    目录 前言 1. 常见的适配方案 2. CSS3 缩放方案 3. 封装一个缩放指令 4. 后记 前言 随着前端技术的不断发展.数据中心(中台)之类的概念的不断升级.物联网设备的更新和普及,越来越多的业主(项目)喜欢在系统中添加一个或者多个可视化大屏,用来集中的展现数据变化.位置变化等等,老板们也更喜欢称之为“态势”. 当然,作为程序员一般都不关心“老板们”的想法,只要完成项目即可.但是经常会有这样的问题:我有一个大屏的模板,但是用户的浏览器分辨率不够,或者有的有书签栏有的没有书签栏,更或者是有的

随机推荐