Vue中click事件防抖和节流处理的示例分析-创新互联

小编给大家分享一下Vue中click事件防抖和节流处理的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

成都创新互联于2013年开始，是专业互联网技术服务公司，拥有项目成都网站建设、成都网站制作网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元沽源做网站,已为上家服务,为沽源各地企业和个人服务,联系电话:13518219792

函数防抖

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

在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中click事件防抖和节流处理的示例分析-创新互联
当前链接：http://6mz.cn/article/cdecss.html