介绍

防抖和节流已经是前端程序员必须会的东西了，写这个主要是无聊了 ，然后想写写看

这两个概念很容易搞混(我之前也搞得不是很清楚)，不过其本质都是为了减少请求次数，减少带宽。

防抖

防抖是指一定在事件触发 n 秒后才执行，如果在一个事件触发的 n 秒内又触发了这个事件，以新的事件的时间为准，n 秒后才执行，等触发事件 n 秒内不再触发事件才执行。

举个例子，csdn的搜索框，输入一些数据后就会自动补全，这个就是用了防抖实现。在输入结束后的0.6s左右发起请求并返回数据。

例子

let time=1000 //设定1000s后发起
let timeout=null
var Anti_shake=()=>{
    //时间未到，清除上一个计时器
    if(timeout) {return clearTimeout(timeout)}
    //重新开始计时
    timeout = setTimeout(async ()=>{
        await Promise().resolve()
    }, time);
}

我们也可以进行一个封装

function debounce(func, time) {
    //定时器变量
    var timeout;
    return function () {
        //每次触发scrolle，先清除定时器
        clearTimeout(timeout);
        //指定多少秒后触发事件操作handler
        timeout = setTimeout(func, time);
    };
};

节流

节流其实和防抖很像，但节流的意思是，一段时间内只能进行一次调用。

比如在1s中，我执行了多次函数，但我需要他1s内只执行一次

例子

var flag=true //设定是否ok
var time=1000 //设定时间为1s
const bind=()=>{
    if(flag){
        setTimeOut(async ()=>{
            await Promise().resolve()
            flag=true
        },time)
        flag=false
    }
}

或者用时间

var lastTime=new Date()
var time=1000

const bind=()=>{
    var nowTime=new Date()
    if(nowTime - lastTime >=time){
        (async ()=>{
           await Promise().resolve() 
        })()
        lastTime=nowTime
    }
}

Q.E.D.