函数节流

出现的场景是，比如监听了滚动事件，每次滚动条滚动都会触发该事件，从而执行相应的逻辑操作，过高的触发频率会导致响应速度跟不上触发的频率，出现延迟，卡顿或假死的现象，对于触发频率较高的函数使用节流来限制。保证在一定的时间内核心代码只执行一次。

1
2
3
4
5
6
7
8
9
10
11
12
function throttle(fn, wait) {
    var timer = null;

    return function() {
        if (!timer) {
            timer = setTimeout(() => {
                fn.apply(this, Array.prototype.slice.call(arguments, 0));
                timer = null;
            }, wait);
        }
    }
}

函数防抖

出现的场景是搜索输入框，输入文本的时候，去调接口，展示搜索结果页，这里就有一个问题，当用户在每次keypress的时候都要异步请求接口，当输入很快时，发出多个异步接口，但是无法控制哪个接口先返回数据，于是会造成返回的数据和当前输入不匹配的问题。而且也会造成性能的浪费。其实完全可以等用户输入完了再进行请求，就是本文说的防抖函数。防抖函数的思想是只执行最后一次。

1
2
3
4
5
6
7
8
9
10
// 防抖，只执行最后一次
function debounce(fn, wait) {
    var timer = null;

    return function() {
        if (timer) clearTimeout(timer);

        timer = setTimeout(() => fn.apply(this, Array.prototype.slice.call(arguments, 0)), wait);
    }
}