防抖 (Debouncing)和节流 (Throttling)-newbie

文章目录

防抖和节流

防抖和节流

一、概述

防抖 (Debouncing) 和 节流 (Throttling) 是前端开发中常用的性能优化技巧，特别是在处理频繁触发的事件（如滚动、输入、窗口大小调整等）时，可以有效地避免不必要的性能浪费。它们的核心目的都是限制事件的触发频率，但在实现方式和适用场景上有所不同。

二、防抖 (Debouncing)

1. 定义

防抖是指在某个时间段内频繁触发事件时，只执行最后一次事件。换句话说，当一个事件被触发后，会等待一定的时间，如果在这段时间内事件再次被触发，则会重新计时，直到没有新的事件触发时，才会执行回调。

2. 使用场景

输入框实时搜索： 用户在输入框中键入内容时，如果每个输入字符都立即触发请求，会导致大量的 API 请求。使用防抖可以确保用户停止输入一定时间后，再触发搜索请求，从而减少请求次数。

const searchInput = document.getElementById('search');

let timer;
searchInput.addEventListener('input', function(event) {
  clearTimeout(timer);
  timer = setTimeout(() => {
    // 发起搜索请求
    console.log('Search for: ' + event.target.value);
  }, 500); // 500ms 的延迟
});

窗口大小调整： 在浏览器窗口大小调整时，如果不加以限制，会频繁触发 resize 事件，影响性能。防抖可以确保窗口调整结束后再执行相应的操作。

let resizeTimer;
window.addEventListener('resize', function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => {
    console.log('Window resized');
  }, 300); // 300ms 的延迟
});

3. 适用场景总结

输入框搜索、表单验证、自动保存等需要延迟执行的场景。
防止多次重复请求造成不必要的性能损耗。

三、节流 (Throttling)

1. 定义

节流是指在规定的时间间隔内，只执行一次事件，无论该事件触发多少次。换句话说，当事件触发后会执行一次回调，之后必须等到一定的时间间隔后才能再次触发回调。

2. 使用场景

滚动事件处理： 在用户滚动页面时，如果每次滚动都触发一次事件处理，可能会导致性能问题。使用节流可以限制滚动事件的处理频率。

let lastScrollTime = 0;
window.addEventListener('scroll', function() {
  const now = new Date().getTime();
  if (now - lastScrollTime > 200) { // 每200ms触发一次
    console.log('Scroll event triggered');
    lastScrollTime = now;
  }
});

动画帧更新： 在动画中，如果每一帧都触发事件，会造成性能问题。节流可以限制事件触发的频率，减少多余的计算。

let lastExecutionTime = 0;
function animate() {
  const now = Date.now();
  if (now - lastExecutionTime >= 1000 / 60) { // 每秒最多触发60次
    console.log('Animating...');
    lastExecutionTime = now;
  }
  requestAnimationFrame(animate);
}
animate();

API 请求限制： 例如用户操作时需要进行网络请求，但又不能频繁请求后台数据。节流可以保证每隔一段时间才会发出请求，避免多次请求。

let lastRequestTime = 0;
button.addEventListener('click', function() {
  const now = Date.now();
  if (now - lastRequestTime > 1000) { // 每1000ms触发一次请求
    console.log('Sending API request');
    lastRequestTime = now;
  }
});

3. 适用场景总结

滚动事件、resize 事件、键盘按键等高频触发的事件。
限制 API 请求的频率，避免过多的请求和服务器压力。

四、防抖与节流的区别

特性	防抖 (Debouncing)	节流 (Throttling)
触发频率	等待事件停止后才执行一次	在固定时间间隔内执行一次
适用场景	输入框搜索、窗口大小调整等需要延迟执行的场景	滚动、resize、动画等频繁触发的事件
触发方式	事件触发后，等待一定时间再执行	事件触发后，按照固定间隔执行
优点	减少频繁执行，提高性能	限制事件执行频率，避免过于频繁的执行

五、总结

防抖和节流在性能优化中有着重要的作用，它们可以根据具体的应用场景帮助开发者优化事件的触发频率。防抖适用于用户输入或操作后延迟执行的场景，节流适用于高频率事件触发的场景。了解并熟练运用这两种技巧可以大大提升用户体验和页面性能。

付鹏篚

防抖 (Debouncing)和节流 (Throttling)

防抖和节流

一、概述

二、防抖 (Debouncing)

1. 定义

2. 使用场景

3. 适用场景总结

三、节流 (Throttling)

1. 定义

2. 使用场景

3. 适用场景总结

四、防抖与节流的区别

五、总结