在绑定 scroll 、resize 这类事件时，当它发生时，它被触发的频次非常高，间隔很近。如果事件中涉及到大量的位置计算、DOM 操作、元素重绘等工作且这些工作无法在下一个 scroll 事件触发前完成，就会造成浏览器掉帧。加之用户鼠标滚动往往是连续的，就会持续触发 scroll 事件导致掉帧扩大、浏览器 CPU 使用率增加、用户体验受到影响。

/**
 * 定义处理逻辑的函数
 */
function realFunc() {
    console.log('这里写具体的逻辑')
}

/**
 * 防抖函数 [ 规定函数至少间隔多久执行 ]
 * @param func
 * @param wait
 * @returns {Function}
 */
function debounce(func, wait = 300) {
    let timeout
    return function () {
        clearTimeout(timeout)
        timeout = setTimeout(func, wait)
    }
}
// 监听屏幕变换，以指定时间最后一次变化为准
window.addEventListener('resize',debounce(realFunc, 500))

/**
 * 节流函数 [ 规定函数在某时间段内最多执行一次 ]
 * @param func
 * @param interval
 * @returns {Function}
 */
function throttle(func, interval = 300) {
    let timeout
    let startTime = new Date()
    return function () {
        clearTimeout(timeout)
        let curTime = new Date()
        if(curTime - startTime <= interval)
        {
            // 小于规定时间间隔时，用setTimeout在指定时间后再执行
            timeout = setTimeout(() => {
                func()
            }, interval)
        }
        else
        {
            //重新计时并执行函数
            startTime = curTime;
            func()
        }
    }
}
// 监听屏幕滚动，指定时间只执行一次逻辑函数
window.addEventListener('scroll',throttle(realFunc,100));