js节流与防抖

最新推荐文章于 2025-11-26 17:11:00 发布

原创最新推荐文章于 2025-11-26 17:11:00 发布 · 95 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

文章介绍了JavaScript中两种优化性能的技术——节流和防抖。节流在固定时间内只执行一次函数，忽略其他触发；防抖则是只执行最后一次触发的事件，如果在设定时间内有新的触发则重置计时。示例代码展示了如何实现这两种技术，分别用于控制事件处理函数的执行频率。

定义：

节流：固定时间段内只调用一次事件处理函数，如果在固定时间内多次触发，只生效一次

防抖：固定时间之后执行时间函数，如果固定时间内重复触发，定时器会重新计时

区别：

函数节流不管事件触发多少次，只在规定的时间内执行一次函数

函数防抖只执行最后一次触发的事件

如何实现

节流：

 <button>点击打印</button>
    <script>
        var but = document.querySelector('button')
        var kun = true
        but.onclick = function(){
                if(kun){
                    kun = false
                    console.log(222);

                    setTimeout(function(){
                        kun = true
                    },2000)
                }
        }
    </script>

防抖:

<button>点击打印</button>
    <script>
        var but = document.querySelector('button')
        var timer = null
        but.onclick = function(){
            clearTimeout(timer)
         timer = setTimeout(function(){
                console.log(222);
            },2000)
        }