JS:防抖与节流

防抖：

对于短时间内连续触发的事件，防抖的含义就是让某个时间期限内，事件处理函数只执行一次。(事件处理函数只在该时间期限内触发的最后一次事件后执行)

节流：

如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。(更改事件处理函数的执行频率)

<script>
    //定义一个监听浏览器滚动事件并返回当前滚动条和页面顶部距离的事件处理函数
    function showTop() {
        var scrollTop = document.body.scrollTop ||
        document.documentElement.scrollTop;
        console.log('滚动条位置：' + scrollTop);
    };
    //防抖
    function debounce(fn, delay) {
        let timer = null; //借助闭包
        return function () {
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(fn, delay);
        }
    };
    window.onscroll = debounce(showTop, 1000);
    //节流
    function throttle(fn, delay) {
        //设置一个状态表示是否处于工作状态
        let valid = true;
        return function () {
            //休息时间 暂不接客
            if (!valid) {
                return false;
            }
            //工作时间，执行函数并且在间隔期内把状态位设为无效
            valid = false;
            setTimeout(() => {
                fn();
                valid = true;
            }, delay)
        }
    }
    window.onscroll = throttle(showTop, 1000);
</script>