朝圣言
扫描关注朝圣言

手机扫描二维码

lodash之throttle和debounce的理解

朝圣言2020-05-05前端仕锦 551 0A+A-

lodash是一个很不错但是很重的类库,它集合了很多实用但不常用的方法。这里主要介绍下我对throttle(节流)和debounce(防抖)的理解。

项目底层主要是uni做的app,因为在安卓机或者低版本的ios手机上,用户点击某个按钮转入下个页面的时候,可能会有100~200的延迟。这就导致一些用户手抖的时候会多点一次。所以需要用到防抖-debounce;

如何正确使用防抖-debounce/节流-throttle;

以下在没有特殊表明下lodash类用“_”代替

lodash.debounce是一个包装方法,参数是一个Func即一个方法,返回是一个方法,需要执行才可以运行Func;

let m = _.debounce(function(){
//插入代码逻辑
},1000)

但是这里的并不会正常执行,你需要

m();

但是在vue下怎么实现。

根据我的需求,我需要写一个跳转页面的方法,基本代码如下。

m(){
_.debounce(function(){
 //插入代码逻辑 
},1000)
},
toPage(){this.m()}

狂点按钮,无效,依旧反复打开同样的页面!

以上是一个错误的例子,用面向对象的思路去理解,如果有效那才奇怪。

每次执行toPage的时候都去实例化(并非真的实例化,只是给你们一个形象的理解)一个新的对象,那每个对象相互独立,肯定不会相互约束。正确的写法如下;

toPage: debounce(
function(e) {
//插入代码逻辑
},
1000,
{
leading: true,
trailing: false
}
),

这里有个要注意的,在es6下我们可以去写“=>”这样的箭头函数方便闭包的时候,运用正确的上下文。但是在lodash,中已经把正确的上下文apply进去了,所以这里直接使用function()而不用()=>{}。否则,this的上下文就不是Vue了;

按需引入

另外lodash这个包很大,我们没必要全部引入,官方似乎提供了cli,构建我们需要的方法,但是我不会用!!!!!!!!但是lodash也提供了部分引入的方法

import debounce from 'lodash/debounce';

这样在构建的时候就可以仅仅引入需要的部分。

节流-throttle的写法也是类型,这里不再赘述,我们谈一下这两种的区别。


防抖-debounce节流-throttle
用处防止用户手动或者代码延迟导致重复操作减少一段时间内反复执行某代码段
延迟(假定设置3000ms延迟)触发并成功执行代码逻辑一次,3000ms内不再次触发,则3000ms后再次触发,会正常执行代码逻辑。若3000ms内被触发,则从当前触发开始,重新计算3000ms。如此循环3000ms触发一次,无论期间是否反复触发,3000ms后若再次触发,则正常执行代码逻辑。
理解
如果用户用户手抖,代码会等到这个用户手不抖,并延迟后在可以继续让用户操作很简单的延迟操作

参数options

debounce和throttle都提供了options配置

{
leading:[Boolean],
trailing:[Boolean]
}

debounce和throttle表现均为一致,也就是leading=true下,在延迟开始就执行,trailing=true需要等到延迟接触才执行。

当leading和trailing均为true的时候,则在延迟之前和延迟之后都执行一遍。

使用场景

debounce

1、用户可能频繁点击按钮,造成不可预知的情况,比如切换页面,提交表单。

2、用户可能正在进行输入,但是需要在输入期间进行接口访问,比如查找,搜索等等。这时候需要等到用户不再进行操作才去请求,

throttle

1、因为功能需要,需要反复请求后端接口。比如socket推送相关通知,我接受到通知后请求相关接口,进行员工日志列表刷新,因为员工日志可能会在集中在某个时段提交,这个时段socket通知会很频繁,100ms一次,这样的逻辑,接口服务器负荷太重,所以我使用throttle每隔1000ms请求一次,并且trailing=true,确保我请求的是最后的数据



文章关键词
前端
web
vue
兼容
发表评论