如何理解debounce和throttle?

CoderStudy 发布于2019-08-23 14:37 / 2828人阅读

摘要：前端工程师们都听过看起来很高级的词，节流和防抖，其实节流就是，防抖就是，其实这个也属于前端性能优化的一部分。具体就不写了，因为常用于连续事件的事件处理函数。可以参考文章最后的，其中的在上的运用，就是的正确打开方式。

前端工程师们都听过看起来很高级的词，节流和防抖，其实节流就是debounce，防抖就是throttle，其实这个也属于前端性能优化的一部分。

在做远程搜索时，如果每输入1个字就调用1次接口，就会频繁查询数据库，假设我们的查询是"一二三四五"，不考虑用户输入错误的情况，至少会请求5次。

有没有一种方法，可以隔个几百毫秒再去查询呢？

有没有更加高级的做法，用户输入完成后，停顿了几百毫秒再去查询呢？

有没有一种方法，可以隔个几百毫秒再去查询呢？

有，可以为函数设置一个setTimeout函数，相当于定时调用接口，这种方法是低效的，也是非常愚蠢的，需要控制开关定时器，一旦搜索功能多了，就更蠢了。

有没有更加高级的做法，用户输入完成后，停顿了几百毫秒再去查询呢？

有，debounce就是做这个事情的，lodash从0.1.0就支持了这个方法。

css-tricks的lodash debounce demo

// 被debounce的函数，http请求，事件处理函数等等
function make_ajax_request(){
    // 这是一个调用后端api的方法
}
// 监听事件并且调用lodash的debounce方法
$(".autocomplete").on("keydown",
     _.debounce(make_ajax_request, 1300));
});

demo地址：https://codepen.io/dcorb/embe...

vue项目中的lodash debounce demo

打印结果：
debounce wait时间为1000ms
触发了input事件 13131
后端请求已完成！
耗时2000毫秒

在1000ms时间范围内触发，仅仅调用一次remoteMethod，也就是仅仅调用一次后端接口，达到我们的预期效果。

debounce适用场景

Debouncing a input event handler （this example explain this use case）

Debouncing a resize event handler

Debouncing a save function in an autosave feature

在做滚动加载时，如果用户滚动的幅度过大，会导致加载的内容过多，相当于水的流量没有控制，一瞬间大量的水量迸发而出，从而所看到的延后好几个与预期的下一个不符的情况

当水流超过阀值时，最多释放出阀值量的水；水流小于阀值时，一切正常。有没有一种办法去控制水流的大小？

有，throttle就是做这个事情的，lodash从0.1.0也支持了这个方法。

具体demo就不写了，因为throttle常用于连续事件的事件处理函数。

可以参考 https://css-tricks.com/the-di... 文章最后的demo，其中的throttle在scroll上的运用，就是throttle的正确打开方式。

throttle适用场景

Throttling a scroll event in infinite scroll（demo case）

Throttling a mousemove/touchmove event handler in canvas

debounce和throttle的对比

地址：http://demo.nimius.net/deboun...
图片：

通过在canvas上连续触发mousemove事件我们发现：

debounce只有当连续事件停止后的一小段时间后再触发一次，连续事件结束后可能只触发一次

throttle会在连续事件的过程中，每隔一段时间至少触发一次，连续事件结束后触发不止一次

努力成为一个不掉队的前端工程师！

混合云专线服务理解module和injector 如何理解云计算如何理解深度学习深度学习如何理解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100870.html

浅谈throttle以及debounce的原理和实现

摘要：浅谈以及的原理和实现背景日常开发中我们经常会遇到一些需要节流调用或者压缩调用次数的情况例如之前我在完成一个需求的时候就遇到了因为后端并发问题导致收到多条信息从而导致函数被重复调用的情况当时的做法是通过对函数的调用进行注册遇到多次调用的时候清浅谈throttle以及debounce的原理和实现背景日常开发中,我们经常会遇到一些需要节流调用,或者压缩调用次数的情况,例如之前我在完成...

jsbintask 2019-08-20 19:08 评论0 收藏0
一次发现underscore源码bug的经历以及对学术界拿来主义的思考

摘要：事情是如何发生的最近干了件事情，发现了源码的一个。楼主找到的关于和区别的资料如下关于拿来主义为什么这么多文章里会出现泽卡斯的错误代码楼主想到了一个词，叫做拿来主义。的文章，就深刻抨击了拿来主义这一现象。事情是如何发生的最近干了件事情，发现了 underscore 源码的一个 bug。这件事本身并没有什么可说的，但是过程值得我们深思，记录如下，各位看官仁者见仁智者见智。平时有浏览别...

Lionad-Morotar 2019-08-19 17:59 评论0 收藏0
throttle与debounce的区别

摘要：自己尝试一下年在的文章中第一次看到的实现方法。这三种实现方法内部不同，但是接口几乎一致。如你所见，我们使用了参数，因为我们只对用户停止改变浏览器大小时最后一次事件感兴趣。前几天看到一篇文章，我的公众号里也分享了《一次发现underscore源码bug的经历以及对学术界拿来主义的思考》具体文章详见，微信公众号：showImg(https://segmentfault.com/img/b...

Pluser 2019-08-19 18:04 评论0 收藏0
探究防抖(debounce)和节流(throttle)

摘要：如果使用的是防抖，那么得等我们停止滚动之后一段时间才会加载新的内容，没有那种无限滚动的流畅感。这时候，我们就可以使用节流，将事件有效触发的频率降低的同时给用户流畅的浏览体验。调用，浏览器会在下次刷新的时候执行指定回调函数。本文来自我的博客，欢迎大家去GitHub上star我的博客本文从防抖和节流出发，分析它们的特性，并拓展一种特殊的节流方式requestAnimationFrame...

keke 2019-08-23 15:19 评论0 收藏0