js防抖与节流的区别及实现

• 防抖 节流
• 概念：
• 函数防抖(debounce)：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。
• 函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。
• 作用：
• 优化性能，减少内存消耗。对于高频触发事件做防抖和节流处理时非常重要的

 window.addEventListener('scroll', handle())

 function handle() {

    // 复杂计算
    // ....
    console.log('运行结果')

 }

等于只要不断滚动 handle()方法就不断执行 及其消耗性能

添加防抖处理：

function handle() {
    let timer = null
    return function () {
        clearTimeout(timer)
        timer = setTimeout(() => {
            // 复杂计算
            // ....
            console.log('运行结果')
        }, 3000)
    }
}

添加节流处理：

function handle() {
    let isCanDo = true
    return function () {
        if (!isCanDo) return
        isCanDo = false
        timer = setTimeout(() => {
            // 复杂计算
            // ....
            console.log('运行结果')
            isCanDo3 = true
        }, 3000)
    }
}

总结：

防抖：如果规定时间内被多次触发，则前面的执行会被取消，只会保留最后一次执行
节流：如果规定时间内被多次触发，只能待前一次执行完了，才能被继续触发，否则不会执行。