1. throttle和debounce 应用场景

首先，咱们来讲一讲节流和防抖的应用场景。节流和防抖出现的场景一般都伴随着客户端DOM事件的监听，并且一般是触发频率高的DOM事件，比如：scroll、mousemove事件。下面会针对节流和防抖举两个例子，让大家品味一下这两个函数的应用场景。
举个例子，实现一个原生的拖拽功能（不能用 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 的话，只要页面滚动就会间隔一段时间判断一次
    debounce 应用场景
    函数去抖有哪些应用场景？哪些时候对于连续的事件响应我们只需要执行一次回调？
  • 每次 resize/scroll 触发统计事件
  • 文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，验证一次就好）

2. throttle实现

其实根据不同的要求有不同的throttle实现方式。比如，如果要求没有timer时，设置的和上一次触发的时间间隔是300ms。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function throttle(fn, time=300){
    let timer = null;
    let prevTime = 0;
    function cb(){
        clearTimeout(timer);
        try {
            fn.call(this, ...arguments);
        } catch(e) {
            logging.error(e);
        }
        prevTime = Date.now();
        timer=null;
    }
    return function(){
        if(timer) return;
        timer = setTimeout(cb.bind(this, ...arguments), Math.max(0, time - Date.now() + prevTime));
    }
}

这段代码就是上一次触发和这一次触发的触发时间间隔在300ms内，比如是100ms，则setTimeout设置时间为200ms。

3. debounce实现

1
2
3
4
5
6
7
8
9
function debounce(fn, time){
    let timer=null
    return function(){
        if(timer) clearTimeout(timer);
        timer = setTimeout(() => {
            fn.call(this, ...arguments)
        }, time);
    };
}