JS防抖与节流

最新推荐文章于 2025-03-03 13:41:54 发布

笨比来咯

最新推荐文章于 2025-03-03 13:41:54 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_60358807/article/details/121970663

版权

防抖节流 JavaScript 事件处理性能优化

关键词由优快云通过智能技术生成

本文深入探讨了JavaScript中的防抖和节流技术，这两种技术都是为了优化高频率事件处理，降低资源消耗。防抖技术在固定时间内，如果事件被频繁触发，会不断重置计时器，只有在最后没有触发的情况下才会执行。而节流则是确保在设定的时间间隔内，无论事件触发多少次，只执行一次。通过示例代码展示了防抖和节流的实现，帮助开发者理解并应用到实际项目中。

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

先说一下防抖特性：即在固定的时间内触发事件过多则会不停的刷新那个时间，比如我要在3秒后执行一个时间，当我们不停的去触发这个时间，这等待的3秒会被不停的刷新为3秒，只有当我们点击后不在进行触发该事件得操作，该事件才会被执行

节流的特性：其实节流的特性和我们的防抖差不多，只是节流的特性是，在一个固定的时间内，不管我们触发多少次的时间，他都只会执行一次。比方说就是在3秒内我们触发很多的事件，在这个期间内，他都只会执行一次的事件操作。

它们相同的特性我觉得就是把我们很高频率的操作变为一个低频率的操作

接下来我们可以看一下代码上是的区别

先看防抖代码：

    function fn(fun){//fun是我们等会传进来的实参，所执行的函数体
        let timer;//定义一个变量来积存计时器
        return function(){
            clearTimeout(timer);//每次调用都会先关闭计时器
            timer=setTimeout(fun,1000)//1秒后调用这函数体
        }
    } 
    let i=0;
    function body(){//等会传进去的函数
        console.log(i++)
    }
    document.getElementById('div').onmousemove=fn(body)//高频触发所调用的函数

通过上面的代码就简单的完成一个防抖函数的小demo如果需要优化的话，需要自行优化

接下来看看节流的代码：

    function fn(fun){
        let timer;
        return function(){
            if(!timer){//必定执行一次
                timer=setTimeout(function(){
                    timer=null//在定时器执行完毕，取空代表后续的可以执行
                    fun();
                },1000)
            }   
        }
    } 
    let i=0;
    function body(){
        console.log(i++)
    }
    document.getElementById('div').onmousemove=fn(body)

上面代码是我通过视频所写的，一个节流的小demo，使用的话对其进行小改就行。

总结一下上面的所有东

防抖：在一个计时器内，触发事件如果多次触发，则计时时间会被重置。

节流：持续触发事件，隔一段事件，只执行一次