作用：节流和防抖作为页面性能优化的一种策略，可以降低回调函数的执行频率，节省计算资源，能有效减少浏览器引擎的损耗，防止出现页面堵塞卡顿现象。

一、节流：简单地说，就是限制一个动作在一段时间内只能执行一次

打个比方，好比我们打英雄联盟或者王者荣耀的时候，释放技能都有一段冷却时间，比如Q技能有5秒的冷却时间，那么我们在5秒钟的时间内只能释放一次Q技能。

一般使用场景：

1、scroll 事件，每隔一秒计算一次位置信息等

2、input 框实时搜索并发送请求展示下拉列表，每隔一秒发送一次请求

代码实现：

function throttle (fn,delay){
    let timer = null
    return ()=>{
        if (timer){return}
        timer = setTimeout(() => {
            fn.apply(this,arguments)
            timer = null
        }, delay);       
    }}

二、防抖：简单地说，就是 当一个动作连续触发，只执行最后一次。

还是举一个英雄联盟中的例子，比如你按下了回城键，那么在8秒钟之后，就会执行回城事件，但如果你再次按下回城键，那么回城时间又将重新计时，需要在等8秒才会执行回城事件。

一般使用场景：

1. 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖

2. 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖

代码实现：

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

来源：https://zhuanlan.zhihu.com/p/466102509

本文链接：http://yanjun202.com/post/41.html