• 函数防抖：用户频繁触发某个行为的时候，我们只识别一次（频率的定义可以自己管控）
• 函数节流：当用户频繁操作的时候，不根据用户的操作 度来触发多少次，而是根据设定好的频率进行触发，实现降频效果，相对于防抖来讲，节流是允许触发多次；

场景一：点击按钮，向服务器发送请求（需要一定的时间），在当请求没有成功之前，再次点击按钮应该什么都不处理才对

• submit是提交按钮
• this.$apt.postInfo()向服务器发送请求，而account和paaword是要向服务器传递的数据

let isRun = false;
submit.onclick = async function(){
    if(isRun){
        //如果处于请求中，就不要再去做任何事情
        return；
    }
    isRun = true//正在请求中
    await this.$api.postInfo({
        account:`zju`;
        password:`1111111`;
    });
    //第一次发送的请求成功了：把isRun的值回归位false
    isRun = false；
}

防抖手写

const submit = document.querySelector(`#submit`);
const func = function func(){
    console.log(ok);
};//要实现的

//假设只要300ms内触发超过两次，就识别为频繁操作，最后把要做的事情只做一遍
let timer = null;
submit.onclick = function (){
    clearTimeout(timer);//清除上一次设置的定时器
    //在重新设置一个新的定时器来监听：300ms内是否触发两次
    // +有的话则把之前设置的定时器清除掉在设置一个即可
    // +没有的话到时间把想要执行的执行即可
    timer = setTimeout(() =>{
        func();
    },300);
};

submit.onclick = utils.debounce(func,300);//第一个参数是要实现的东西，第二个参数是定时器事件
(function (){
    //函数的防抖与节流
    const debounce = function debounce(func,wait){
        let timer = null;
        return function opearte(){
            //疯狂点击多次，opearte就会被执行多少次，但是我们的目的是让func（真正要处理的函数）执行一次即可
            clearInterval(timer);
            timer = setTimeout(() =>{
                func();
            },wati)
        }
    }
})