JS中的防抖与节流

最新推荐文章于 2025-05-18 00:11:08 发布

多喝_热水

最新推荐文章于 2025-05-18 00:11:08 发布

阅读量180

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_55972948/article/details/125375102

防抖和节流是JavaScript中用于优化性能的两种重要技巧。防抖技术确保在固定时间内只执行一次操作，常用于搜索框延迟请求、输入验证等场景，但可能会显得不够人性化。节流则限制了在一定时间内操作的频率，适用于表单提交、窗口resize等，确保了流畅的用户体验。本文深入探讨这两种技术的工作原理、应用场景及优缺点，并提供实现示例。

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

防抖：

在用户触发事件的时候，开启一个定时器，只要用户再次触发，清除定时器，再重新开始计时

简单总结：固定的时间内，事件只允许发生一次

应用场景：

搜索框搜索输入。只需用户最后一次输入完，再发送请求
手机号、邮箱验证输入检测
窗口大小resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

缺点：不够人性化，过于生硬

function debounce(fn,t) {
    var timer=null;
     function inner() {
      clearTimeout(timer);
      timer=setTimeout(fn,t)
    }
    return inner;
}

节流：

简单总结：在一段时间内，只允许触发一次

应用场景===>1.提交表单 2.高频监听事件

function throttle(fn,t){
     var timer=null;
    function inner(){
    //判断当前事件是否可以被触发
    if(!timer){
    //直接触发事件
        fn()
    timer=setTimeout(function(){
    clearTimeout(timer)
    timer=null
    },t)
            }
     }
}
return inner;
}