面题系列：防抖与节流

2022-03-22 179 阅读2分钟

Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。

题目描述

防抖与节流对于前端应用来说可以说是个老生常谈的话题，你可以说一下他们解决了什么问题吗？举例说明一般会用在哪些场景下？另外，你尝试可以手写出他们吗？

考察点

防抖与节流的认知
项目开发的经验
高级函数的使用

解题思路

解决问题

防抖与节流目的都是为了防止某个函数短时间内频繁多次触发的问题。

区别在于应用场景与目的的不同：

防抖：会应用在屏幕尺寸变化发出的一些计算函数，输入框搜索关键词等需求，目的是为了，避免大量资源浪费，只执行最后一次函数结果。
节流：一般会应用在秒杀按钮的点击等需求上，目的是不让用户频繁去执行函数请求，每一次触发结束后，再等一定周期才可以触发下一次。

高阶函数

接收函数类型的参数，返回值也是函数。
例如：
- 定时器: setTimeout() / setInterval()
- Promise: Promise(()=>{}) / then(()=>{},reason=>{})
- 数组遍历相关的方法: forEach() / filter() / map() / reduce() /find() / findIndex()

实现

防抖

function debounce(handler, delay) {
    var handler = handler || null;
    var delay = delay || 1000;
    var timer = null;
    return function() {
        clearTimeout(timer)
        timer = setTimeout(function() {
            handler.apply(this, arguments);
        }.bind(this), delay)
    }
}

防抖这里可以看出，保存起来的函数将会绑定一个定时器，每次都会延迟触发，并且每次会清除上一个的定时器，这样就保证了在一定时间内延迟触发一次。

节流

function trottle(handler, delay) {
    var handler = handler || null;
    var delay = delay || 1000;
    var last = 0;
    return function(e) {
        var now = +new Date();
        if(now - last > delay) {
            handler.apply(this, arguments);
            last = now;
        }
    }
}

节流实现起来更加简单，每次执行函数前记录一下当前时间，并判断开始时间和结束时间是否在划定的时间范围内，如果超过返回，则执行函数，并再记录下结束时间。这样就可以，保证在一定时间范围内，阻止了多次触发同一个函数的需求。