函数的节流和去抖

js性能优化

Posted by Damon on 2017-07-24

前言

函数节流和去抖的出现场景,一般都伴随着客户端 DOM 的事件监听。例如:监听滚动事件判断是否到页面底部自动加载更多:给 scroll 加了 debounce 后,只有用户停止滚动后,才会判断是否到了页面底部;如果是 throttle 的话,只要页面滚动就会间隔一段时间判断一次

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

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

throttle(函数节流)

应用场景

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

  • DOM 元素的拖拽功能实现(mousemove)
  • 射击游戏的 mousedown/keydown 事件(单位时间只能发射一颗子弹)
  • 计算鼠标移动的距离(mousemove)
  • Canvas 模拟画板功能(mousemove)
  • 搜索联想(keyup)

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
* 函数节流(如果有连续事件响应,则每间隔一定时间段触发)
* @param {function} func 需要节流的函数
* @param {number} wait 触发间隔
*/
function throttle(func, wait) {
let startTime;
return function () {
let context = this, arg = arguments, currentTime = +new Date();
if (!startTime) {
startTime = currentTime
}
// 大于间隔时间才马上执行函数, 然后更新函数执行时间
if (currentTime - startTime > wait) {
func.apply(context, arg)
startTime = currentTime
}
}
}

debounce(函数去抖)

应用场景

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

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

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
* 函数去抖(如果有连续事件响应, 则在事件结束后的延迟一段时间触发)
* @param {function} function 需要去抖的函数
* @param {number} delay 调用延迟时间
*/
function debounce(func, delay) {
let timer;
return function () {
let context = this, arg = arguments;
// 由于事件持续相应,定时器会在每次相应中清除掉.
// 最终使得,事件停止相应之前的建立的最后一个定时器生效
clearTimeout(timer);
timer = setTimeout(function () {
func.apply(context, arg)
}, delay)
}
}