防抖节流小技巧

最新推荐文章于 2025-11-28 10:25:57 发布

原创最新推荐文章于 2025-11-28 10:25:57 发布 · 75 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

本文介绍了JavaScript中两种重要的性能优化技术——防抖(debounce)和节流(throttle)。防抖函数确保在一定时间间隔内只执行最后一次调用，而节流则保证在固定时间间隔内执行一次。通过示例代码，帮助读者快速掌握两者的实现原理。

防抖和节流有很多人都会分不清楚，下面用一小句话来概括一下，加上代码，快速掌握原理

防抖

防抖就是公交车等人上车，有人上等5s，5s内又有人上再等5s

function debounce (fn, delay = 300){
    let timer = null
    return function (...args) {
        clearTimeout(timer)
        timer = setTimeout(()=>{
            fn.call(this, ...args)
        }, delay);
    }
}
debounce(()=> {}, 1000)

2.节流

节流就是公交车固定5分钟一班车

let timer = null
function throttle (fn, delay = 300) {
    if(timer == null){
        timer = setTimeout(() => {
            fn()

            clearTimeout(timer)
            timer = null
        }, delay);
    }
}
throttle(()=> {}, 1000)