防抖节流小技巧

这个一个非常哈

于 2023-02-09 10:54:18 发布

阅读量61

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/ae_pppppp/article/details/128949003

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

防抖

防抖就是公交车等人上车，有人上等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)