什么是防抖与节流？应用场景举例

小徐不会写代码

已于 2024-06-03 14:14:05 修改

阅读量1.2k

点赞数 23

CC 4.0 BY-SA版权

文章标签：前端 javascript

于 2024-06-03 14:10:46 首次发布

本文链接：https://blog.csdn.net/weixin_57334661/article/details/139412670

防抖（Debounce）和节流（Throttle）是JavaScript中用于优化性能的技术，特别是在处理高频事件（如窗口滚动、输入事件、resize事件等）时，以避免过于频繁地执行回调函数，从而节省资源和提高应用响应速度。

两者的区别在于：

防抖是延迟执行，只有在事件触发的频率降低到一定程度后才会执行，而且如果事件持续触发，之前的所有执行都会被取消。
节流是间隔执行，保证在特定时间内至少执行一次，不论事件触发的频率如何。

函数防抖（Debounce）

概念：防抖函数确保在最后一次操作后的一段指定时间（如300毫秒）内，如果不再有新的操作，才会执行回调函数。如果在这段等待时间内又有新的操作，那么会重新开始计时，之前的计时会被取消，直到用户停止触发事件。
应用场景：例如在搜索框输入时，可以防止每次按键都发送请求，而是等用户停止输入一段时间后再发送一次请求。

普通函数示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>防抖搜索框示例</title>
<script>
// 防抖函数实现
function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

// 模拟的搜索请求函数
function search(query) {
  console.log(`正在搜索: ${query}`);
  const resultDiv = document.querySelector('#search-results');
  resultDiv.innerHTML = `搜索结果：${query}`;
  // 实际应用中这里会发起网络请求
}

// 使用防抖包装搜索请求函数
const debouncedSearch = debounce(search, 300); // 延迟时间为300毫秒

// 当文档加载完成后绑定事件监听器
document.addEventListener('DOMContentLoaded', () => {
  const searchInput = document.getElementById('search-input');
  searchInput.addEventListener('input', function() {
    const query = this.value.trim();
    if (query) {
      debouncedSearch(query);
    }
  });
});
</script>
</head>
<body>
  <input type="text" id="search-input" placeholder="输入关键词进行搜索...">
  <div id="search-results">搜索结果：</div>
</body>
</html>

箭头函数示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>防抖搜索框示例 - 箭头函数版</title>
<script>
// 防抖函数实现（箭头函数形式）
const debounce = (func, wait) => {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), wait);
  };
};

// 模拟的搜索请求函数（箭头函数形式）
const search = (query) => {
  console.log(`正在搜索: ${query}`);
  // 获取并更新结果显示div的内容
  const resultDiv = document.getElementById('search-results');
  resultDiv.textContent = `搜索结果: ${query}`;
  // 实际应用中这里会发起网络请求并处理响应
};

// 使用防抖包装搜索请求函数
const debouncedSearch = debounce(search, 300); // 延迟时间为300毫秒

// 当文档加载完成后绑定事件监听器（使用箭头函数）
document.addEventListener('DOMContentLoaded', () => {
  const searchInput = document.getElementById('search-input');
  
  searchInput.addEventListener('input', () => {
    const query = searchInput.value.trim();
    if (query) {
      debouncedSearch(query);
    }
  });
});
</script>
</head>
<body>
  <input type="text" id="search-input" placeholder="输入关键词进行搜索...">
  <div id="search-results">搜索结果：</div>
</body>
</html>

函数节流（Throttle）

概念：节流函数则是在固定的时间间隔内保证至少执行一次回调函数，即使事件在这一时间段内被频繁触发。它不会忽略任何事件，而是限制了处理它们的速度。
应用场景：例如页面滚动时，我们可能希望每隔一定时间（如每200毫秒）更新一次滚动位置，而不是每次滚动都更新。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节流滚动事件示例</title>
<style>
#log {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f5f5f5;
  padding: 10px;
  text-align: center;
}
</style>
<script>
// 节流函数实现
function throttle(func, delay) {
  let timeoutId;
  // 存储上次执行函数的时间戳
  let lastExecuteTime = 0;
  return function(...args) {
    const now = Date.now();
    // 如果有剩余时间，则取消之前的定时器
    const remainingTime = delay - (now - lastExecuteTime);
    // 如果剩余时间小于等于0，则立即执行函数
    if (!timeoutId && remainingTime <= 0) {
      timeoutId = null;
      // 更新上次执行函数的时间戳
      lastExecuteTime = now;
      // 执行函数
      func.apply(this, args);
    } else if (!timeoutId) {  // 如果没有剩余时间，则设置定时器
      timeoutId = setTimeout(() => {
        lastExecuteTime = Date.now();
        // 清除定时器
        timeoutId = null;
        func.apply(this, args);
      }, remainingTime);
    }
  };
}

// 模拟的滚动处理函数
function handleScroll() {
  const logElement = document.getElementById('log');
  logElement.innerText = `已触发滚动事件: ${++scrollCount} 次`;
}

let scrollCount = 0; // 将滚动计数设为全局变量或模块级变量

// 使用节流包装滚动处理函数
const throttledHandleScroll = throttle(handleScroll, 200); // 延迟时间为200毫秒

// 当文档加载完成后绑定事件监听器
document.addEventListener('DOMContentLoaded', () => {
  const logElement = document.getElementById('log');
  window.addEventListener('scroll', function() {
    throttledHandleScroll();
  });

  // 初始展示滚动次数
  logElement.textContent = `已触发滚动事件: 0 次`;
});
</script>
</head>
<body style="height: 2000px;">
  <div id="log"></div>
</body>
</html>