节流与防抖

• 节流：同一时间段内，只触发一次。利用节流阀，等程序第一次执行完毕之后，再执行下一次

• 防抖：规定时间内，多次触发，以最后那次触发开始重新计时。延迟执行，每次点击都会清除前面的延时器，然后触发新的延时器

<button>点我呀</button>
    <script>
        //防抖
        const btn = document.querySelector('button')
        let timer
        btn.addEventListener('click', () => {
            //点击多次，清除前面的延时器，然后重新触发延时器
            if (timer) clearTimeout(timer)
            timer = setTimeout(function () {
                console.log('点太多次了，休息会儿吧');
            }, 1000)
        })
    </script>
    <script>
        //节流：开关思想，等第一次执行完毕之后，再重新启用延时器。确保只触发一次
        let flag = true
        btn.addEventListener('click', function () {
            if (!flag) return
            if (flag) {
                flag = false
                setTimeout(function () {
                    console.log('慢慢来');
                    flag = true
                }, 1000)
            }
        })

    </script>