【前端面经】手写一个防抖、节流

最新推荐文章于 2024-12-04 15:29:04 发布

小王同学在这里

最新推荐文章于 2024-12-04 15:29:04 发布

阅读量75

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript 开发语言

原文链接：https://chatgpt.com/

防抖、节流及其实现

防抖、节流及其实现

防抖、节流及其实现

防抖（Debounce）和节流（Throttle）是两种常见的优化技术，用于控制函数的执行频率，特别是在处理频繁触发的事件时，如窗口调整大小、滚动、输入框输入等。这些技术可以提高性能和用户体验，避免不必要的函数调用。

防抖（Debounce）

防抖是一种确保函数在特定时间间隔内只执行一次的技术。如果在这段时间内函数再次被调用，定时器会重新计时。

适用场景：防抖适用于用户输入（如搜索框实时查询），窗口调整大小事件等。在这些场景中，函数应该在用户停止操作后的某个时间段内只执行一次。
- 搜索框输入：用户输入停止后再进行搜索请求，避免每次输入都发送请求。
- 窗口大小调整：用户停止调整窗口大小后再执行调整后的逻辑。
实现原理：使用一个定时器，每次触发事件时重置定时器，只有当定时器到期时才执行函数。

示例代码

function debounce(func, wait) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

// 用法示例：实时搜索输入框
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(() => {
  // 执行搜索查询
  console.log('Searching...');
}, 300));

节流（Throttle）

节流是一种确保函数在特定时间间隔内只执行一次的技术，不管这段时间内函数被调用了多少次。

应用场景：节流适用于需要持续响应用户行为的事件，如滚动、鼠标移动等。在这些场景中，函数应该在一定时间间隔内多次执行，但不会频繁地触发。
- 滚动事件：限制滚动事件处理器的执行频率，减少滚动时执行逻辑的次数。
- 按钮点击：防止按钮被短时间内频繁点击，导致多次触发事件。
实现原理：使用一个定时器或者时间戳，在特定时间间隔内只允许函数执行一次。

示例代码：

function throttle(func, wait) {
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime >= wait) {
      lastTime = now;
      func.apply(this, args);
    }
  };
}

// 用法示例：窗口滚动事件
window.addEventListener('scroll', throttle(() => {
  // 执行滚动处理
  console.log('Scrolling...');
}, 200));