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

 更新时间:2019年11月13日 09:25:14   转载 作者:人称~  
今天小编就为大家分享一篇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事件防抖和节流处理详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue项目中axios使用详解

    vue项目中axios使用详解

    这篇文章主要介绍了vue项目中axios使用方法以及原理介绍,如果你正巧学习这个知识点,那么参考下吧。
    2018-02-02
  • vue实现购物车小案例

    vue实现购物车小案例

    这篇文章主要为大家详细介绍了vue实现购物车小案例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • 详解为element-ui的Select和Cascader添加弹层底部操作按钮

    详解为element-ui的Select和Cascader添加弹层底部操作按钮

    这篇文章主要介绍了详解为element-ui的Select和Cascader添加弹层底部操作按钮,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • Vue+ElementUI项目使用webpack输出MPA的方法

    Vue+ElementUI项目使用webpack输出MPA的方法

    这篇文章主要介绍了Vue+ElementUI项目使用webpack输出MPA的方法,本文图文并茂给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • vue实现简单表格组件实例详解

    vue实现简单表格组件实例详解

    vue的核心思想就是组件,什么是组件呢?按照我的理解组件就是装配页面的零件,vue三大核心组件 路由 状态管理,路由控制页面的渲染,页面由组件组成,数据有vuex进行管理和改变。下面我会以一个简单的案例来说
    2017-04-04
  • vue项目打包后怎样优雅的解决跨域

    vue项目打包后怎样优雅的解决跨域

    这篇文章主要介绍了vue项目打包后怎样优雅的解决跨域,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 使用vue-infinite-scroll实现无限滚动效果

    使用vue-infinite-scroll实现无限滚动效果

    vue-infinite-scroll插件可以无限滚动实现加载更多,其作用是是当滚动条滚动到距离底部的指定高度时触发某个方法。这篇文章主要介绍了用vue-infinite-scroll实现无限滚动效果,需要的朋友可以参考下
    2018-06-06
  • 详解Vue中使用Echarts的两种方式

    详解Vue中使用Echarts的两种方式

    这篇文章主要介绍了Vue中使用Echarts的两种方式,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • Vue监听数组变化源码解析

    Vue监听数组变化源码解析

    这篇文章主要为大家详细解析了Vue监听数组变化的源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • vue2.0结合Element实现select动态控制input禁用实例

    vue2.0结合Element实现select动态控制input禁用实例

    本篇文章主要介绍了vue2.0结合Element实现select动态控制input禁用实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05

最新评论