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

概述

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

言归正传，今天要介绍的是 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 的话，只要页面滚动就会间隔一段时间判断一次 https://github.com/hanzichi/u...

debounce 应用场景

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

• 每次 resize/scroll 触发统计事件

• 文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，验证一次就好）

小结

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

附另外两篇关于 underscore 函数节流以及去抖源码剖析的文章

• underscore 函数去抖的实现

• underscore 函数节流的实现