简单了解防抖(debounce)与节流(throttle)

最新推荐文章于 2025-09-12 11:38:57 发布

原创

最新推荐文章于 2025-09-12 11:38:57 发布 · 746 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js

本文介绍了JavaScript中防止函数频繁执行的两种技术：防抖(debounce)和节流(throttle)。防抖确保在特定时间内只执行一次函数，如果在设定时间内再次触发事件，会重新计时。节流则是在设定的时间间隔内，无论事件触发多少次，只执行一次函数。这两种方法常用于优化高频触发的事件，如onmousemove、onscroll，以减少服务器压力和提升页面性能。

防抖（debounce）与节流（throttle）

- - 防抖(debounce)
  - 节流（throttle）

防抖(debounce)

在平时的开发过程中，往往会绑定鼠标移动事件onmousemove，滚动滚动条事件onscroll等等。而这些事件会高频触发，如果我们绑定onkeyup事件发请求去服务端检查，在客户输入的过程中，事件的触发频率会很高，造成服务器压力大，页面卡顿的情况。对客户体验造成不好的影响，防抖和节流就可以解决这种问题

防抖简单来说：就是在规定的时间内只让你执行一次，如果在时间内又一次触发了此事件，则会重新计算时间，直到你不在触发此事件，并等待一定时间，才会执行事件中的函数。

// 延迟执行版防抖
function count() {
   
   
           console.log(1)
       }
 function debounce(fn, time) {
   
   
         let timer;
       return function () {
   
   
              clearTimeout(timer); // 如果在1秒钟内重复点击，会清除上一个定时器，下面的定时器将重新计算时间
           timer = setTimeout(() => {
   
   
                fn()               // 将函数放在定时器中，1秒钟之后执行。
           }, time);
      }

       }</

最低0.47元/天解锁文章