前端高级

前端高级-节流与防抖

在面对一些用户的频繁操作时，如滚动、输入、频繁点击等，需要不断响应，这样难免会造成一些性能浪费和消耗，防抖与节流就是来解决这一问题的。

什么是防抖(debounce)？

对同一个函数F，两次调用时间间隔大于T时才执行（如用户表单输入事件触发间隔大于15ms时才发送ajax请求）。

简单实现：

1
2
3
4
5
6
7
8
9
10
function debounce(fn, delay) {
    var timer = null;
    return function() {
        var args = arguments;
        timer && clearTimeout(timer);
        timer = setTimout(e => {
            fn.apply(this, args);
        }, delay);
    }
}

应用：

  • 表单搜索提示
  • 窗口 resize 事件

什么是节流(throttle)？

对同一个函数F，每隔一定时间T执行一次（如处理滚动事件时，每隔20ms执行一次）。

简单实现：

1
2
3
4
5
6
7
8
9
10
11
12
function throttle(fn, delay) {
    var canRun = true;
    return function() {
        var args = arguments;
        if (!canRun) return;
        canRun = false;
        setTimeout(e => {
            fn.apply(this, args);
            canRun = true;
        }, delay);
    }
}

应用：

  • 页面滚动
  • 拖动

防抖与节流的其他实现

建议使用 lodash 的节流和防抖。

注意：除了使用 setTimeout ,还可以用 requestAnimationFrame 实现。

参考