节流和防抖

防抖和节流：性能优化的方案之一。防止单一行为短时间被重复调用多次。

防抖：单次频发中只调用一次

以窗口滑动为例

function debounce(fn, sec) { // 防抖函数
    let time = null
    return () => { // 返回一个函数 用闭包保存time 防止全局变量污染
        if (time) {
            clearTimeout(time)
            time = setTimeout(fn, sec)
        } else {
            time = setTimeout(fn, sec)
        }
    }
}
function showTop() { // 输出滚动条位置函数
    let showScroll = document.body.scrollTop || document.documentElement.scrollTop
    console.log(showScroll)
}
window.onscroll = debounce(showTop, 1000)

节流：固定时间间隔调用，和技能冷却同理

function debounce(fn, sec) {
    let time = false // 设置标志位
    return () => {
        if (time) {
            return false
        } else {
            time = true
            setTimeout(() => {
                fn()
                time = false
            }, sec)
        }
    }
}
function showTop() {
    let showScroll = document.body.scrollTop || document.documentElement.scrollTop
    console.log(showScroll)
}
window.onscroll = debounce(showTop, 1000)