莉丝前端

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的写法也是类型，这里不再赘述，我们谈一下这两种的区别。

参数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，确保我请求的是最后的数据