js的防抖与节流

有些事件在浏览器上频繁触发，比如鼠标滚动scroll,窗口大小等，会使浏览器频繁渲染或者计算位置，加重浏览器负担导致卡顿等。使用防抖和节流可以减轻低效的触发事件，提高用户体验。

防抖

在一个事件触发后的等待时间内如果又触发了一次这个事件，那么会按照新的事件时间去等待。

// wait 延迟时间
function debounce(wait) {
    let timeout;
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(() => {
        console.log('动作')
    }, wait);
}

节流

在一个事件触发后单时间内不再允许相同的事件触发，等待第一个事件完成后才能接着触发第二次

function throttle(wait) {
    let timeout;
    if (!timeout) {
        timeout = setTimeout(() => {
            console.log('动作')
            timeout = null
        }, wait);
    }
}