防抖与节流

防抖

解释：当持续触发某事件时，一定时间间隔内没有再触发事件时，事件处理函数才会执行一次，如果设定的时间间隔到来之前，又一次触发了事件，就重新开始延时。

function debounce(fn, wait) {
    let timeout = null // 借助闭包
    return function () {
        if (timeout) clearTimeout(timeout)
        timeout = setTimeout(fn, wait);
    }
}
function handle() {  
    console.log(Math.random())
}
window.addEventListener('scroll', debounce(handle, 1000))

节流

当持续触发事件时，有规律的每隔一个时间间隔执行一次事件处理函数。如果规定时间内触发了事件，不执行。

function throttle (fn, wait) {
    let flag = false
    return function () {
        if (flag) {
            return false
        }
        flag = true
        setTimeout(function () {
          flag = false
          fn()
        }, wait)
    }
}