涨点防抖节流的知识 | 8月更文挑战

这是我参与8月更文挑战的第15天，活动详情查看：8月更文挑战

首先防抖和节流属于性能优化方面的知识，现实开发中也经常遇到。例如：resize，scroll等这些无法控制触发频率的，而且如果这时候调用接口，响应比较慢，就会出现卡顿的状态，所以主要是为了不要频繁多次调用接口函数。

一、实现防抖函数（debounce）

原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，就要重新计算函数执行的时间。

使用场合：

1、例如在防止按钮点击多次，只执行最后点击触发一次，就会用到防抖函数。

2、服务端中表单验证需要服务端配合，只执行一段连续的输入事件的最后一次。

3、悬停触发接口或者修改样式等，多次触发后，只执行最后一次。

手写一个：

const debounce = (fn,delay)=> {
    let timer = null;
    return (...args)=> {
        clearTimeout(timer);
        timer = setTimeout(()=> {
            fn.apply(this,args);
        },delay);
    }
}

二、节流函数（throttle）

原理：规定在一定时间内只能触发一次函数，如果这个时间内触发了多次也只有一次生效，简单理解为执行一次后，限制在一定时间内不允许再次执行，过了这个时间才可以再执行。

使用场合:

1、拖拽：固定时间内只执行一次，防止超高频次触发位置改变

2、缩放：监听浏览器resize缩放功能，做某些样式或者移动端的分页查询接口的功能等。

3、动画：避免短时间内多次触发动画引起性能的问题。

4、监听输入框输入，联想调用接口，展示不同的下拉内容。

……

手写一个：

const throttle = (fn,delay=500)=> {
    let flag = true;
    return (...args)=> {
        if(!flag) return;
        flag = false;
        setTimeout(()=> {
            fn.apply(this,args);
            flag = true;
        },delay);
    }
}
//使用
container.onmousemove = throttle(count,1000);

总的来说，防抖和节流都有类似的功能，为了优化防止高并发的处理，所以在不同场景下选择不同的方法，如果是连续高频率触发的情况下使用节流，如果有高频率且有停顿的情况下可以使用防抖。