js防抖与节流的区别及实现【优化代码】

* 防抖 节流 * 概念： * 函数防抖(debounce)：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。 * 函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。 * 作用： * 优化性能，减少内存消耗。对于高频触发事件做防抖和节流处理时非常重要的 window.add这是我的一个技术博客网站，主要目地是为了方便自己整理基础知识应用与收集常见技术问题，以便后面出现同样问题可以直接解决；

 * 防抖 节流

 * 概念：

 * 函数防抖(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)
    }
}

总结：

防抖：如果规定时间内被多次触发，则前面的执行会被取消，只会保留最后一次执行

节流：如果规定时间内被多次触发，只能待前一次执行完了，才能被继续触发，否则不会执行。

相关阅读

推荐文章

热门文章