节流和防抖

防抖

什么是防抖？

防抖（debounce）：不管我执行某个操作多少次，他只会执行最后一次。像搜索框只在输入完后，才执行查询的请求。

 // 选中元素
    let input = document.querySelector('input')
    //添加事件
    let time
    input.addEventListener('input', function () {
        //   如果存在定时器，则把它停掉
        if (time) {
            clearTimeout(time)
        }
        //  延迟1s后再触发
        time = setTimeout(() => {
            console.log(123);
        }, 1000)
        
    })
    

如上代码在输入框中无论怎么输值，他也只会在1s后在打印台触发123

节流

那么，什么是节流？

节流（throttle）指的是：在一段时间内，频繁的触发同一个操作，只会触发 1 次。

像在射击游戏中，单位时间内只能发射一颗子弹。

概念有点和防抖反过来，节流是属于只执行第一次，而防抖则是执行最后一次

  //    选中元素
    let button = document.querySelector('button')
    let flag = true  //默认事件可以做
    button.addEventListener('click', function () {
        if (flag) {   //事件开始做的时候，就把它截停
            flag = false
            setTimeout(() => {
                console.log(123);
                flag = true     //2S之后才能继续再执行该事件
            }, 2000);
        }

如上代码无论在按钮上按多少次，他也只会在2s后在打印台触发第一次123

以上两者优点：防止高频的事件触发造成不必要的计算消耗，这样可以有效减少请求的次数，节省网络资源。