JavaScript 中的函数防抖/节流

最新推荐文章于 2023-02-16 22:12:53 发布

原创最新推荐文章于 2023-02-16 22:12:53 发布 · 197 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #函数 #防抖 #节流

JavaScript 专栏收录该内容

41 篇文章

订阅专栏

本文详细介绍了函数防抖和节流技术的工作原理及其实现方法，通过具体示例解释了如何使用这两种技术来优化事件处理过程，减少不必要的计算和DOM操作，从而提升网页性能。

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

防抖原理：

触发一个事件，一定时间后再执行

时间还没到又触发了一次，那就重新计算等待时间

你站在门外，每次有人出去你就关门，

会出现什么情况，一个人出去，门关一半又有人出，门就不能关了，这样就很麻烦

解决方式：

每次有人出去，隔五秒后你关门，你执行关门动作之前又有人出去，就重新计时

这样就避免了频繁触发关门事件

函数防抖解决什么问题

开发中，onresize,scroll,mousemove,mousehover等事件，会被频繁触发，不做限制的话，有可能一秒内执行上百次，这些函数内部还执行了其他函数，特别的有耗费性能的操作DOM时，不仅浪费计算机资源，还会降低运行速度，甚至造成浏览器卡死、崩溃。

短时间内重复的ajax调用不仅会造成数据关系的混乱，还会造成网络拥塞，增加服务器压力

函数防抖怎么解决这些问题

函数防抖的要点，需要一个延时函数setTimeout来辅助实现，延迟运行需要执行的代码

方法多次触发的时候，就把上次记录的延迟执行代码的clearTimeout清除，重新开始及时

如果计时期间事件没有被重新触发，等延迟事件计时结束，就执行相应代码

函数防抖的代码实现

function debounce(fn,wait){
    let time = null;
    return function(){
       
       clearTimeout(time)
        time = setTimeout(()=>{
            fn.apply(this)
        },wait)
    }
}

window.addEventListener("resize",debounce(demo,1000))

function demo(){
    console.log('1')
}

函数防抖使用场景

用户名、邮箱、手机号输入验证
搜索框搜索输入。只在用户完全输入结束后，再发送请求
浏览器窗口大小改变，防止重复渲染等

节流

节流和防抖一样，解决事件短时间内触发的问题

节流指连续触发事件但是在n秒中只执行一次函数，就是稀释函数的执行频率

function throttle(fn,wait){
    let lastTime = 0
    return function(){
        let newTime = Data.now()
        if(newTime-lastTime>wait){
            fn.apply(this)
            lastTime = nowTime
        }
    }
}
window.addEventListener("resize",throttle(demo,1000))

function demo(){
    console.log('1')
}