节流与防抖

最新推荐文章于 2025-07-30 16:36:32 发布

原创最新推荐文章于 2025-07-30 16:36:32 发布 · 127 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

#JavaScript 专栏收录该内容

36 篇文章

订阅专栏

本文深入探讨了JavaScript中两种重要的性能优化技术——节流和防抖。通过示例代码，展示了如何实现节流函数和防抖函数，以限制函数在特定时间内的执行次数，提升页面响应速度和性能。这两个概念在处理用户输入事件、滚动事件等场景中尤其关键。

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

节流：在规定的时间内只触发一次

let time1 = null;

$('.box1').click(function () {

let time2 = new Date()

if (time2 - time1 >= 2000) {

time1 = new Date()

console.log('节流');

}

})

节流封装函数：

function throttle(fn, delay) {
  let flag = true;
  return function () {
     if (flag) {
        setTimeout(() => {
           fn.call(this)
           flag = true
        }, delay)
     }
  flag = false;
  }
}

防抖：触发后要停上一定的时间后再次触发

let time3 = null;

$('.box2').click(function () {

let time4 = new Date();

if (time4 - time3 >= 2000) {

console.log('防抖');

}

time3 = new Date();

})

防抖封装函数：

function debounce(fn, delay) {
    let time = null;
    return function () {
      if (time !== null) {
            clearTimeout(time)
      }
      time = setTimeout(() => {
      // 需要改变this指向，否则input内容为空
      // input调用封装函数时，this指向的是调用者
          fn.call(this);
      }, delay)
    }
}