JavaScript 函数节流和函数去抖应用场景辨析

[lessfish]

概述

也是好久没更新 源码解读，看着房价蹭蹭暴涨，心里也是五味杂陈，对未来充满恐惧和迷茫 ...（敢问一句你们上岸了吗）

言归正传，今天要介绍的是 underscore 中两个重要的方法，函数节流和函数去抖。这篇文章不会涉及具体的代码实现（关于代码实现请期待下文），会从零开始介绍函数节流和函数去抖的概念，辨析应用场景。为什么我对这两个方法情有独钟要花大篇幅去介绍？因为就是它们带我入了「underscore 源码解读」的坑（详见 一次发现underscore源码bug的经历以及对学术界『拿来主义』的思考）。

函数节流和去抖的出现场景，一般都伴随着客户端 DOM 的事件监听。举个例子，实现一个原生的拖拽功能（不能用 H5 Drag&Drop API），需要一路监听 mousemove 事件，在回调中获取元素当前位置，然后重置 dom 的位置（样式改变）。如果我们不加以控制，每移动一定像素而触发的回调数量是会非常惊人的，回调中又伴随着 DOM 操作，继而引发浏览器的重排与重绘，性能差的浏览器可能就会直接假死，这样的用户体验是非常糟糕的。我们需要做的是降低触发回调的频率，比如让它 500ms 触发一次，或者 200ms，甚至 100ms，这个阈值不能太大，太大了拖拽就会失真，也不能太小，太小了低版本浏览器可能就会假死，这样的解决方案就是函数节流，英文名字叫「throttle」。函数节流的核心是，让一个函数不要执行得太频繁，减少一些过快的调用来节流。

说完函数节流，再看它的好基友函数去抖（debounce）。思考这样一个场景，对于浏览器窗口，每做一次 resize 操作，发送一个请求，很显然，我们需要监听 resize 事件，但是和 mousemove 一样，每缩小（或者放大）一次浏览器，实际上会触发 N 多次的 resize 事件，用节流？节流只能保证定时触发，我们一次就好，这就要用去抖。简单的说，函数去抖就是对于一定时间段的连续的函数调用，只让其执行一次。

throttle 应用场景

函数节流有哪些应用场景？哪些时候我们需要间隔一定时间触发回调来控制函数调用频率？

• DOM 元素的拖拽功能实现（mousemove）
• 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
• 计算鼠标移动的距离（mousemove）
• Canvas 模拟画板功能（mousemove）
• 搜索联想（keyup）
• 监听滚动事件判断是否到页面底部自动加载更多：给 scroll 加了 debounce 后，只有用户停止滚动后，才会判断是否到了页面底部；如果是 throttle 的话，只要页面滚动就会间隔一段时间判断一次 underscore 函数去抖的实现 #21 (comment)

debounce 应用场景

函数去抖有哪些应用场景？哪些时候对于连续的事件响应我们只需要执行一次回调？

• 每次 resize/scroll 触发统计事件
• 文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，验证一次就好）

小结

函数节流和函数去抖的核心其实就是限制某一个方法被频繁触发，而一个方法之所以会被频繁触发，大多数情况下是因为 DOM 事件的监听回调，而这也是函数节流以及去抖多数情况下的应用场景。至于函数节流和去抖方法的具体代码实现以及调用方式，下文我们再做分享。

[xdlrt]

wait for the next eassy.:)

[linonetwo]

现在具体实现是不是一般靠 RxJs 这类 Observable 呀

[bodyno]

简单来说

一个是多久触发一次

一个是延迟多久触发

不知道这样是不是更容易理解一些

[lessfish]

@bodyno

我觉得应该理解成 「一个是间隔时间段触发」，「一个是只触发一次」。

"延迟多久触发" 不大准确，可以第一次触发事件时立即触发

[lessfish]

@linonetwo sorry，不大了解

[pod4g]

@hanzichi 觉得子迟的理解更容易让人理解。就像一窝蜂的人去排队看演出，队伍很乱，看门的老大爷每隔1秒，让进一个人，这个叫throttle，如果来了这一窝蜂的人，老大爷一次演出只让进一个人，下次演出才让下一个人进，这个就叫debounce（如果用onresize类比，就是鼠标mousedown，然后疯狂缩放窗口，然后鼠标mouseup，这整个过程就是一次演出，这次演出只允许一个人看即只执行一次回调）。

[henryluki]

我觉得“节流”和“去抖”应该结合在一起：间隔时间段内，只执行一次。
比如下面一段代码：

/**
 * 设置只执行一次的timer
 */
let timer = {};
const TS = 200;

function _clearTimer(name){
    if (timer[name]) {
        window.clearTimeout(timer[name])
        timer[name] = null
    }
}

export default function setTimer(name, fn, ts){
    _clearTimer(name)
    timer[name] = window.setTimeout(fn, ts || TS)
}

[TechQuery]

JS 函数节流、去抖一定要依赖定时器吗？ TechQuery/iQuery.js@fd3a0a3

[linonetwo]

@hanzichi https://segmentfault.com/a/1190000004293922

[mqliutie]

这个时间段到底多少是最合适的?一般使用场景都是 滚动 或者 拖拽 吧? 我看一般都设置在300ms, 这个数值通过什么方法能算出来最少多少能的出来最佳性能么?

[wy1009]

对对对没有错，我刚开始的时候也困惑过，书上说的节流好像和我知道的防抖是一样的，那节流和防抖到底是什么区别……

[hsuna]

就交互场景而已，可以这样举例子～
throttle像是按钮的冷却时间，防止用户频繁操作；
debounce像是搜索框的查询，等待用户完成操作再执行，避免打字期间就不断的查询。

[shileiyuan]

节流： 一个函数要执行，要等待一定的时间间隔，如果在等待的时候又有一个函数要执行，那么上一个函数取消，且下一个函数要等待的时间间隔就是上一个函数剩下的时间。
防抖：一个函数要执行，要等待一定的时间间隔，如果在等待的时候又有一个函数要执行，那么上一个函数取消，且下一个函数重新计时。

[CharlyCheng]

15年房价跌的时候没入手，16年房价暴涨没入手，现在高的平缓期，还是没入手，已经无法入手！

[lessfish]

@CharlyCheng 现在有钱也难入手，开始摇号了都。。

[wy1009]

15年房价跌的时候没入手，16年房价暴涨没入手，现在高的平缓期，还是没入手，已经无法入手！

现在感觉阴跌了，我是打算等有资格就入手……

[monw3c]

15年入手广州东中心，17年入手佛山中心