防抖和节流

防抖的目的是为了解决什么？

中途不要触发我们的事件，等到最后进行触发，那么中途为什么会一直触发呢，比如一个输入框，我们要做一个响应式数据查询，当用户在输入框输入内容时，我们怎么知道这个用户是否已经输入结束了，输入的过程中可能会停顿个1-2秒或者3-4秒，而不是当键盘击下输入框发生变化，立刻执行查询操作，防抖是在一定时间内，出现多次重复触发行为，只执行最后一次有效动作

写一个防抖函数
let time = null

键盘弹起事件 test
function test (){
    clearInterval(time)
    time = setTimeout(()=>{
        console.log('---一秒后触发--')
    },1000)
}

比如上方test 是一个监听键盘弹起的事件，当键盘弹起后我们就清除掉定时器，在启动定时器，一秒钟后输出里面的congsole.log()打印值，如果在一秒钟内我们又按下按键又弹起，那么弹起事件被触发，表示用户又输入了内容 那就会清楚掉之前的定时器，console.log()的内容不会触发，直到最后一次我们输入完内容，键盘弹起，并且一秒钟之内没有键盘弹起的动作，我们才会执行console.log()进行输出，就实现了在规定的时间内，多次触发一个事件，只执行最后一次，这就是防抖

节流的目的是解决什么问题

节流字面理解，就是进行控制，我有想让你做事，我又不想让你干事情太频繁，比如用户在手机上滑动浏览内容，滑动到底部时，立刻调用数据，用户不停滑动，数据就不停被返回，加载进来，这个时候访问量特别大，每个用户都这么操作，特别是商城类，其实返回的信息用户还没仔细看，这时候商城开发者提出，不能这样，这样给服务器增加压力，也没有起到宣传产品的效果，如果访问量过大，服务器会直接宕机，做个限流吧，一段时间内只能访问一次，如果用户继续触发，也不执行查询数据的操作

let flag = true

function test(flag){
    if(flag){
        this.flag = false
        setTimeout(()=>{
            this.flag = true
            console.log('--节流--')
        }，2000)
    }
}

这里flag就是一个节流阀门开关，初始化阀门状态开着，当事件触发时，我们通过验证flag是否处于开启状态，执行操作，如果开启，就进入到内部，然后执行我们的操作，进到内部后直接改写我们的flag的状态为false，两秒后在修改为true，这样当我们在两秒内再次进行事件触发时，因为flag的状态为false，他就不会执行我们的事件，这样就实现了在一定时间内，只执行一次操作，这就是节流