防抖&节流

原创已于 2022-08-17 08:37:11 修改 · 271 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2022-08-16 14:18:20 首次发布

个人总结前端面试考点专栏收录该内容

7 篇文章

订阅专栏

本文深入探讨了防抖(debounce)和节流(throttle)两种JavaScript优化技术，它们常用于处理高频事件，如鼠标点击、页面滚动和输入搜索等。防抖确保在设定的时间间隔内只执行一次函数，而节流则限制了函数在特定时间内的执行次数。文中提供了两种节流实现方式，并列举了各自的实际应用案例。

防抖

连续触发事件但是在 n 秒中只执行一次函数

使用场景：

鼠标不断点击触发，单位时间内只触发一次
监听滚动事件，比如是否滑到底部自动加载更多

function debounce(fn,delay) {
    let timer
    return function () {
        // 保存this
        let context=this
        // 考虑到需要执行的函数有参数的情况
        let args=arguments
        clearTimeout(timer)
        timer=setTimeout(function(){
            fn.apply(context,args)
        },delay)
    }
}

节流

指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间

使用场景：

input搜索时用户在不断输入值时，用防抖来节约请求资源
window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

方式一：

function throttle1(fn,delay) {
    let timer
    return function () {
        let context=this
        let args=arguments
        if(timer){
            return
        }
        timer=setTimeout(function(){
            fn.apply(context,args)
            timer=null
        },delay)
    }
}

方式二：

function throttle2(fn,delay) {
    let pre=0
    return function () {
        let now=new Date()
        let context=this
        let args=arguments
        if(now-pre>delay){
            fn.apply(context,args)
            pre=now
        }
    }
}