Vue中使用防抖与节流的方法

更新时间：2022年01月18日 10:42:00 作者：丿小破孩灬

这篇文章主要为大家介绍了Vue中使用防抖与节流的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

何为防抖/节流

首先先说说何为防抖与节流

防抖(debounce)

防抖就是一段时间内会多次触发相同的事件,而我们的目的却只是想让他们在不触发的多久以后再执行该事件,例如鼠标移动事件(mousemove)、输入框变更事件(change)等等,这个时候我们就需要一个方法去控制他,一段时间内没执行该事件后,执行该事件,即为防抖

节流(throttle)

节流就是短时间内会多次触发相同的事件,而我们的目的却只是想让他们既定时间内只触发一次,例如滚轮事件(scroll)、鼠标点击事件(click)等等,这个时候我们就需要一个方法去控制他,一段时间(0.5S/1S)之内只能触发一次事件,即为节流

防抖(debounce)

// 防抖
export default function debounce(fn, time) {
  time = time || 200
  // 定时器
  let timer = null
  return function(...args) {
    var _this = this
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(function() {
      timer = null
      fn.apply(_this, args)
    }, time)
  }
}

节流(throttle)

// 节流
export default function throttle(fn, time) {
  let timer = null
  time = time || 1000
  return function(...args) {
    if (timer) {
      return
    }
    const _this = this
    timer = setTimeout(() => {
      timer = null
    }, time)
    fn.apply(_this, args)
  }
}

页面使用

直接就用click的点击速度模拟触发事件的频率了

<el-button @click="clickDebounce">防抖</el-button>
<el-button @click="clickThrottle">节流</el-button>

//引用定义好的JS方法
import debounce from '@/utils/debounce'
import throttle from '@/utils/throttle'
methods: {
    clickDebounce: debounce((e) => {
      console.log(1)
    }, 1000),
    clickThrottle: throttle((e) => {
      console.log(2)
    }, 1000),
}

使用场景

使用场景根据业务需求可以有很多很多简单举两个例子

防抖(debounce)搜索框自动搜索的时候,可搜索下拉框远程搜索的时候，用户在没输入完的情况下，防抖可以节约请求资源。
鼠标移动的时候,鼠标停下来不动再执行方法

节流(throttle)滚动页面的时候

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

您可能感兴趣的文章:

Vue实现Tab选项卡切换
这篇文章主要为大家详细介绍了Vue实现Tab选项卡切换，点击不同标题显示对应图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
Vue中select下拉框的默认选中项的三种情况解读
这篇文章主要介绍了Vue中select下拉框的默认选中项的三种情况解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
关于vue面试题汇总
本文给大家收藏整理了关于vue面试题汇总的一些知识,需要的朋友可以参考下
2018-03-03
如何解决d3.event在v7版本无效影响zoom拖拽缩放问题
这篇文章主要介绍了如何解决d3.event在v7版本无效影响zoom拖拽缩放问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
Vue3实现LuckSheet在线预览Excel表格
在前端开发中预览Excel文件是常见的需求之一,本文将介绍如何使用Vue.js框架以及两个优秀的Excel库——LuckyExcel和Luckysheet,来实现Excel文件在线预览功能,希望对大家有所帮助
2023-11-11
vue使用eventBus遇到数据不更新的问题及解决
这篇文章主要介绍了vue使用eventBus遇到数据不更新的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
vue3如何按需加载第三方组件库详解
距离 Vue 3.0 正式版发布已经有一段时间了,关于vue3组件库相关的问题还是挺多人感兴趣的,这篇文章主要给大家介绍了关于vue3如何按需加载第三方组件库的相关资料,需要的朋友可以参考下
2021-06-06
VUE3中h()函数和createVNode()函数的使用解读
这篇文章主要介绍了VUE3中h()函数和createVNode()函数的使用解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue3中使用ant-design-vue的layout组件实现动态导航栏和面包屑功能
这篇文章主要介绍了vue3中使用ant-design-vue的layout组件实现动态导航栏和面包屑功能,基于一个新建的Vue3项目上实现，本文结合示例代码给大家介绍的非常详细，需要的朋友可以参考下
2023-01-01
VUE中如何调用高德地图获取当前位置(VUE2.0和3.0通用)
使用uniapp开发微信小程序时,多多少少会遇到获取当前位置的详细信息,下面这篇文章主要给大家介绍了关于VUE中如何调用高德地图获取当前位置(VUE2.0和3.0通用)的相关资料,需要的朋友可以参考下
2023-04-04