JavaScript节流阀

节流阀：可以减少一段时间内事件触发的频率，指定时间内只能触发一次；

        // 1、先定义一个节流阀
        let timer = null;
        // 2、开启延时器
        timer = setTimeout(() => {
            // 所要执行的操作
            // 执行完后将节流阀设置为null
            timer = null;
        }, 500);
        // 3、开启延时器之前都要判断节流阀是否为空  注：这个判断一定要放在开启延时器之前
        if (timer) { return }

例子：

        // 例子：500毫秒内只能点击一次
        let btn = document.querySelector('.btn');
        let timer = null;
        btn.addEventListener('click', function () {
            if (timer) { return }
            timer = setTimeout(() => {
                console.log('500毫秒内只能点击一次');
                timer = null;
            }, 500);
        })

顺便讲下防抖与节流的区别：

防抖:如果事件被频繁触发，防抖能保证只有最后一次触发生效!前面多次的触发都会被忽略!
节流:如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件!