Vue 中使用lodash对事件进行防抖和节流操作


Posted in Javascript onJuly 26, 2020

有些浏览器事件可以在短时间内快速触发多次,比如调整窗口大小或向下滚动页面。例如,监听页面窗口滚动事件,并且用户持续快速地向下滚动页面,那么滚动事件可能在 3 秒内触发数千次,这可能会导致一些严重的性能问题。

如果在面试中讨论构建应用程序,出现滚动、窗口大小调整或按下键等事件请务必提及 防抖(Debouncing) 和 函数节流(Throttling)来提升页面速度和性能。这两兄弟的本质都是以闭包的形式存在。通过对事件对应的回调函数进行包裹、以自由变量的形式缓存时间信息,最后用 setTimeout 来控制事件的触发频率。

Throttle: 第一个人说了算

throttle 的中心思想在于:在某段时间内,不管你触发了多少次回调,我都只认第一次,并在计时结束时给予响应。

先给大家讲个小故事:现在有一个旅客刚下了飞机,需要用车,于是打电话叫了该机场唯一的一辆机场大巴来接。司机开到机场,心想来都来了,多接几个人一起走吧,这样这趟才跑得值——我等个十分钟看看。于是司机一边打开了计时器,一边招呼后面的客人陆陆续续上车。在这十分钟内,后面下飞机的乘客都只能乘这一辆大巴,十分钟过去后,不管后面还有多少没挤上车的乘客,这班车都必须发走。

在这个故事里,“司机” 就是我们的节流阀,他控制发车的时机;“乘客”就是因为我们频繁操作事件而不断涌入的回调任务,它需要接受“司机”的安排;而“计时器”,就是我们上文提到的以自由变量形式存在的时间信息,它是“司机”决定发车的依据;最后“发车”这个动作,就对应到回调函数的执行。

总结下来,所谓的“节流”,是通过在一段时间内无视后来产生的回调请求来实现的。只要一位客人叫了车,司机就会为他开启计时器,一定的时间内,后面需要乘车的客人都得排队上这一辆车,谁也无法叫到更多的车。

对应到实际的交互上是一样一样的:每当用户触发了一次 scroll 事件,我们就为这个触发操作开启计时器。一段时间内,后续所有的 scroll 事件都会被当作“一辆车的乘客”——它们无法触发新的 scroll 回调。直到“一段时间”到了,第一次触发的 scroll 事件对应的回调才会执行,而“一段时间内”触发的后续的 scroll 回调都会被节流阀无视掉。

现在一起实现一个 throttle:

// fn是我们需要包装的事件回调, interval是时间间隔的阈值
function throttle(fn, interval) {
 // last为上一次触发回调的时间
 let last = 0
 
 // 将throttle处理结果当作函数返回
 return function () {
  // 保留调用时的this上下文
  let context = this
  // 保留调用时传入的参数
  let args = arguments
  // 记录本次触发回调的时间
  let now = +new Date()
  
  // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
  if (now - last >= interval) {
  // 如果时间间隔大于我们设定的时间间隔阈值,则执行回调
   last = now;
   fn.apply(context, args);
  }
 }
}

// 用throttle来包装scroll的回调
const better_scroll = throttle(() => console.log('触发了滚动事件'), 1000)

Debounce: 最后一个人说了算

防抖的中心思想在于:我会等你到底。在某段时间内,不管你触发了多少次回调,我都只认最后一次。

继续讲司机开车的故事。这次的司机比较有耐心。第一个乘客上车后,司机开始计时(比如说十分钟)。十分钟之内,如果又上来了一个乘客,司机会把计时器清零,重新开始等另一个十分钟(延迟了等待)。直到有这么一位乘客,从他上车开始,后续十分钟都没有新乘客上车,司机会认为确实没有人需要搭这趟车了,才会把车开走。

我们对比 throttle 来理解 debounce:在throttle的逻辑里,“第一个人说了算”,它只为第一个乘客计时,时间到了就执行回调。而 debounce 认为,“最后一个人说了算”,debounce 会为每一个新乘客设定新的定时器。

现在一起实现一个 debounce:

// fn是我们需要包装的事件回调, delay是每次推迟执行的等待时间
function debounce(fn, delay) {
 // 定时器
 let timer = null
 
 // 将debounce处理结果当作函数返回
 return function () {
 // 保留调用时的this上下文
 let context = this
 // 保留调用时传入的参数
 let args = arguments

 // 每次事件被触发时,都去清除之前的旧定时器
 if(timer) {
  clearTimeout(timer)
 }
 // 设立新定时器
 timer = setTimeout(function () {
  fn.apply(context, args)
 }, delay)
 }
}

// 用debounce来包装scroll的回调
const better_scroll = debounce(() => console.log('触发了滚动事件'), 1000)

用 Throttle 来优化 Debounce

debounce 的问题在于它“太有耐心了”。试想,如果用户的操作十分频繁——他每次都不等 debounce 设置的 delay 时间结束就进行下一次操作,于是每次 debounce 都为该用户重新生成定时器,回调函数被延迟了不计其数次。频繁的延迟会导致用户迟迟得不到响应,用户同样会产生“这个页面卡死了”的观感。

为了避免弄巧成拙,我们需要借力 throttle 的思想,打造一个“有底线”的 debounce——等你可以,但我有我的原则:delay 时间内,我可以为你重新生成定时器;但只要delay的时间到了,我必须要给用户一个响应。这个 throttle 与 debounce “合体”思路,已经被很多成熟的前端库应用到了它们的加强版 throttle 函数的实现中:

// fn是我们需要包装的事件回调, delay是时间间隔的阈值
function throttle(fn, delay) {
 // last为上一次触发回调的时间, timer是定时器
 let last = 0, timer = null
 // 将throttle处理结果当作函数返回
 
 return function () { 
 // 保留调用时的this上下文
 let context = this
 // 保留调用时传入的参数
 let args = arguments
 // 记录本次触发回调的时间
 let now = +new Date()
 
 // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
 if (now - last < delay) {
 // 如果时间间隔小于我们设定的时间间隔阈值,则为本次触发操作设立一个新的定时器
  clearTimeout(timer)
  timer = setTimeout(function () {
   last = now
   fn.apply(context, args)
  }, delay)
 } else {
  // 如果时间间隔超出了我们设定的时间间隔阈值,那就不等了,无论如何要反馈给用户一次响应
  last = now
  fn.apply(context, args)
 }
 }
}

// 用新的throttle包装scroll的回调
const better_scroll = throttle(() => console.log('触发了滚动事件'), 1000)

document.addEventListener('scroll', better_scroll)

在 Vue 里使用 lodash 中的 Debouncing 和 Throttling

事件节流和防抖是提高性能或降低网络开销的好方法。虽然 Vue 1曾经支持对事件的节流和防抖,但是在Vue 2中为了保持核心的简单性,删除对事件的节流和防抖的支持。因此,在Vue 2对对事件进行防抖和节流我们可以使用 lodash 来做。

安装

可以通过 yarn 或 npm 安装 lodash。

# Yarn
$ yarn add lodash
# NPM
$ npm install lodash --save

注意:如果我们不想导入lodash的所有内容,而只导入所需的部分,则可以通过一些Webpack构建自定义来解决问题。 还可以使用lodash.throttle和lodash.debounce等软件包分别安装和导入lodash的各个部分。

throttling 方法

要对事件进行节流处理方法非常简单,只需将要调用的函数包装在lodash的_.throttle函数中即可。

<template>
 <button @click="throttledMethod()">Click me as fast as you can!</button>
</template>

<script>
import _ from 'lodash'

export default {
 methods: {
 throttledMethod: _.throttle(() => {
  console.log('I get fired every two seconds!')
 }, 2000)
 }
}
</script>

debouncing 方法

尽管节流在某些情况下很有用,但一般情况我们经常使用的是防抖。 防抖实质上将我们的事件分组在一起,并防止它们被频繁触发。 要在Vue组件中使用节流,只需将要调用的函数包装在lodash的_.debounce函数中。

<template>
 <button @click="throttledMethod()">Click me as fast as you can!</button>
</template>

<script>
import _ from 'lodash'

export default {
 methods: {
 throttledMethod: _.debounce(() => {
  console.log('I only get fired once every two seconds, max!')
 }, 2000)
 }
}
</script>

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

以上这篇Vue 中使用lodash对事件进行防抖和节流操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
斜45度寻路实现函数
Aug 20 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
JavaScript多线程详解
Aug 12 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
利用Node.js如何实现文件循环覆写
Apr 05 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 #Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 #Javascript
Element Tooltip 文字提示的使用示例
Jul 26 #Javascript
Element Popover 弹出框的使用示例
Jul 26 #Javascript
Element Card 卡片的具体使用
Jul 26 #Javascript
Element Carousel 走马灯的具体实现
Jul 26 #Javascript
three.js欧拉角和四元数的使用方法
Jul 26 #Javascript
You might like
PHP中cookies使用指南
2007/03/16 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
php UNIX时间戳用法详解
2017/02/16 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
Yii框架日志操作图文与实例详解
2019/09/09 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
2016/08/16 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
微信小程序 页面跳转传值实现代码
2017/07/27 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
vue.js配合$.post从后台获取数据简单demo分享
2018/08/11 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
用Python实现大文本文件切割的方法
2019/01/12 Python
Python对象与引用的介绍
2019/01/24 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
安全生产投入制度
2014/01/29 职场文书
首席执行官观后感
2015/06/03 职场文书
中学教师读书笔记
2015/07/01 职场文书