JavaScript的防抖和节流

        防抖和节流在我们的页面中很常见，就比如我们经常用到的获取验证码，每60秒获取一次,这种在n秒内多次点击，但只执行一次的操作叫做防抖和节流。都是为了减少浏览器的负载而使用的方法，有时候网络卡的时候，用户点击后网页没有反应，用户会以为没有点击到，会重复点击，造成事件重复触发。为了缓解服务器压力，我们可以使用防抖和节流，降低服务器压力。

1.节流

        在事件执行后的n秒内，重复触发事件，事件也不会执行，这就是节流。就比如我们经常用到的获取验证码，每60秒获取一次，无法重复触发事件。

        需求：设置一个按钮，触发时输出 Hello，距离上一次事件执行后5秒内触发事件，事件不执行。

        最基础的节流：设置两个变量，preDate为上一次事件执行的时间戳，nowDate为当前的时间戳，nowDate-preDate就可以触发，触发后设置 preDate = nowDate。

        // 节流
        // 5秒内不管点击多少次  真正的代码都只执行1次
        let preTime = 0
        btn.addEventListener('click', function () {
            // 事件处理函数只要被点击一定会执行
            // 条件是：点击事件发生的时间距离上次时间要超过5秒
            let nowTime = new Date() //当前时间
            if (nowTime - preTime > 5000) {
                console.log('Hello')
                // 当我的代码执行完以后，下次的开始时间就是本次点击时间
                preTime = nowTime
            }
        })

        大佬的节流：这里使用到了闭包函数，true作为flag的参数传入，作为自执行函数的参数，自执行参数返回一个闭包函数作为button点击事件的事件处理函数。在flag为true的时候，执行下面的代码，打印Hello，然后设置定时器，3秒后flag=true，在此期间内执行return null的操作，也就是直接返回，不执行打印函数。

        // 大佬的节流
        btn = document.querySelector('btn')
        btn.onclick = (function (flag) {
            return function () {
                if (!flag) return // 后续操作不再执行
                flag = false
                console.log('Hello')
                setTimeout(() => {
                    flag = true
                }, 3000)
            }
        })(true)

 2.防抖

        在事件触发的n秒后执行函数，若在n秒内再次触发事件，就重新计时，如果在n秒内多次触发事件，会在最后一次事件开始计时，n秒后触发。

        需求：在表单输入框内输入数据，停止输入n秒后输出输入框内容。

使用闭包函数作为输入处理事件，timer是闭包函数对上层函数的私有变量的引用，timer是共享的，闭包函数操作的都是同一个timer，每次触发事件都会清除上一个的定时器，重新计时。

        let inp = document.querySelector('input')
        inp.oninput = (function () {
            let timer = null
            return function () {
                clearTimeout(timer)
                timer = setTimeout(() => {
                    console.log(inp.value)
                }, 3000)
            }
        })()