# 节流&防抖

# 节流

当一个事件被频繁触发的时候，每隔一段时间，只会执行一次事件回调。

通俗的讲就是节约流量，高频率的触发事件的时候，不需要每次触发都执行事件回调，我们每隔一段时间触发一次这个事件回调。

适用场景：

拖拽场景：固定时间内只执行一次，防止高频的触发事件造成性能损耗。
监听滚动事件：实现触底加载更多功能。
屏幕尺寸变化时，页面内容随之变动，执行相应的逻辑。

实现逻辑：

// 定时器实现
function throttle(fn, delay = 100) {
    let timer = 0
    return function () {
        if (timer) return 
        let timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = 0
        }, delay)
    }
}
//时间戳实行
function throttle(fn, delay = 100) {
    let lastCall = 0
    return function () {
        if (Date.now - lastCall < delay ) return
        fn.apply(this, arguments)
        lastCall = Date.now
    }
}

# 防抖

当一个事件被频繁触发的时候，触发结束的一段时间后只执行一次事件回调；如果在这一段时间内事件再次被触发则重新计时。

防止抖动，在一定时间内只执行一次。
在你坐电梯时，当一直有人进电梯（连续触发），电梯门不会关闭，在一定时间间隔内没有人进入（停止连续触发）才会关闭。

适用场景：

远程搜索框：防止用不断输入过程中不断请求资源。设置输入结束后内一段时间后只触发一次，用防抖来节约资源。
按钮提交，比如点赞，表单提交等，防止用户多次提交。
监听resize触发，不断调整浏览器窗口会一直触发resize，使用抖动可以让其只执行一次。

实现逻辑：

function debounce(fn, delay = 100) {
    let timer = 0
    return function() {
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(this, arguments)
            clearTimeout(timer)
        }, delay)
    }
}

← 使用nvm管理node