throttle 和 debounce 简单实现

Taste 发布于2019-08-22 18:17 / 2279人阅读

摘要：但是，我在测试中，智能手机中的慢速滚动可能会触发每秒多达个事件。把电梯完成一次运送，类比为一次函数的执行和响应。假设电梯有两种运行策略和，超时设定为秒，不考虑容量限制。保证如果电梯第一个人进来后，秒后准时运送一次，不等待。

使用场景

某些场景下，一些计算量比较大的函数，操作 DOM 函数等函数会被频繁调用执行，而且由于人的反应有限实际不需要那么多计算，就会造成极大的性能浪费。
举个例子
当使用鼠标滚轮时可以轻松触发每秒30个事件。但是，我在测试中，智能手机中的慢速滚动可能会触发每秒多达100个事件。你的滚动处理程序是否真的需要这个执行速度？
下面我列举一些场景

window对象的resize、scroll事件，如处理图片懒加载

拖拽时的mousemove事件

键盘 keyup 事件

...

原理

那么throttle 和 debounce 函数是怎样做的呢？
这里引用经典的举例

想象每天上班大厦底下的电梯。把电梯完成一次运送，类比为一次函数的执行和响应。假设电梯有两种运行策略 throttle 和 debounce ，超时设定为15秒，不考虑容量限制。
1.throttle 策略的电梯。保证如果电梯第一个人进来后，15秒后准时运送一次，不等待。如果没有人，则待机。
2.debounce 策略的电梯。如果电梯里有人进来，等待15秒。如果又人进来，15秒等待重新计时，直到15秒超时，开始运送。

用我的一句话说是，throttle 在一段时间内最多执行一次，而 debounce 是在接下来一段时间内没有再次调用，则执行。

实现

由于说了是简单实现，那么就把最核心的部分拿出来

debounce

function debounce (cb, delay) {
    var timer = null;
    return function () {
        clearTimeout(timer);
        timer = setTimeout(cb, delay);
    }
}

throttle

function throttle (cb, delay) {
    var lastTime = Date.now();
    return function () {
        var nowTime = Date.now();
        if (nowTime - lastTime > delay) {
            cb();
            lastTime = nowTime;
        }
    }
}

可以看下效果
查看链接

知道原理之后，想要使用，现在很多库都有这个功能

jquery 插件 jQuery throttle / debounce

Underscore 库 _.throttle 和 _.debounce

lodash 库 _.debounce 和 _.throttle

私有云服务器托管简单cdn部署实现实现简单计算器 php简单实现mvc js实现的简单特效

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

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

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

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

jsbintask 2019-08-20 19:08 评论0 收藏0
【译】通过例子解释 Debounce 和 Throttle

摘要：举例举例通过拖拽浏览器窗口，可以触发很多次事件。不支持，所以不能在服务端用于文件系统事件。总结将一系列迅速触发的事件例如敲击键盘合并成一个单独的事件。确保一个持续的操作流以每毫秒执行一次的速度执行。 Debounce 和 Throttle 是两个很相似但是又不同的技术，都可以控制一个函数在一段时间内执行的次数。当我们在操作 DOM 事件的时候，为函数添加 debounce 或者 th...

LeoHsiun 2019-08-23 11:34 评论0 收藏0
Debounce vs Throttle

摘要：那么还有最后一个问题，那我之前设置的定时器怎么办呢定时器执行的是这个函数，而这个函数又会通过进行一次判断。我们在处理事件的时候，有些事件由于触发太频繁，而每次事件都处理的话，会消耗太多资源，导致浏览器崩溃。最常见的是我们在移动端实现无限加载的时候，移动端本来滚动就不是很灵敏，如果每次滚动都处理的话，界面就直接卡死了。因此，我们通常会选择，不立即处理事件，而是在触发一定次数或一定时间...

xcold 2019-08-20 18:03 评论0 收藏0
throttle函数与debounce函数

摘要：当函数被再次触发时，清除已设置的定时器，重新设置定时器。函数设置定时器，并根据传参配置决定是否在等待开始时执行函数。函数取消定时器，并重置内部参数。 throttle函数与debounce函数有时候，我们会对一些触发频率较高的事件进行监听，如果在回调里执行高性能消耗的操作，反复触发时会使得性能消耗提高，浏览器卡顿，用户使用体验差。或者我们需要对触发的事件延迟执行回调，此时可以借助th...

Prasanta 2019-08-26 12:18 评论0 收藏0
throttle与debounce的区别

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

Pluser 2019-08-19 18:04 评论0 收藏0