什么是防抖与节流

前端与小赵2024-11-30 9:26

防抖（Debouncing）与节流（Throttling）

在前端开发中，尤其是在处理用户输入、窗口调整大小、滚动事件等高频率触发的事件时，防抖和节流是两种常用的技术手段。它们可以帮助我们优化性能，减少不必要的计算，提高用户体验。本文将详细介绍防抖和节流的概念、特点、作用，并通过具体例子进行说明。

一、防抖（Debouncing）

定义

防抖是一种编程技术，用于限制函数在短时间内被频繁调用。当一个函数在短时间内被多次调用时，防抖会延迟执行该函数，直到最后一次调用后的一段时间内没有新的调用才会真正执行。如果在这段时间内又有新的调用，则重新计时。

特点
  • 延迟执行：防抖会在最后一次调用后等待一段时间再执行。
  • 减少执行次数：通过延迟执行，可以大大减少函数的执行次数。
  • 适合连续触发的场景：适用于需要在一系列操作结束后才执行的场景，如搜索框输入、窗口调整大小等。
作用
  • 提高性能：减少不必要的计算，避免页面卡顿。
  • 优化用户体验：避免频繁的网络请求或重绘，提升响应速度。
实现

以下是一个简单的防抖函数实现：

javascript 复制代码 
function debounce(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), wait);
  };
}
示例

假设我们在一个搜索框中输入内容时，每次输入都会触发一个网络请求来获取搜索建议。为了减少请求次数，我们可以使用防抖技术。

html 复制代码 
<input type="text" id="searchInput" placeholder="Search...">
<script>
  const input = document.getElementById('searchInput');

  function fetchSuggestions(query) {
    console.log('Fetching suggestions for:', query);
    // 模拟网络请求
    // fetch(`/api/suggestions?query=${query}`)
    //   .then(response => response.json())
    //   .then(data => {
    //     // 处理数据
    //   });
  }

  const debouncedFetch = debounce(fetchSuggestions, 300);

  input.addEventListener('input', (event) => {
    const query = event.target.value;
    debouncedFetch(query);
  });
</script>

在这个例子中，fetchSuggestions 函数会在用户停止输入 300 毫秒后才被调用，从而减少了不必要的网络请求。

二、节流（Throttling）

定义

节流是一种编程技术，用于限制函数在一定时间内的调用次数。无论函数被调用多少次，在指定的时间间隔内只会执行一次。节流可以确保函数以固定的时间间隔执行。

特点
  • 固定时间间隔执行：节流会在指定的时间间隔内只执行一次函数。
  • 控制执行频率：通过设置时间间隔，可以控制函数的执行频率。
  • 适合频繁触发的场景：适用于需要控制执行频率的场景，如窗口滚动、鼠标移动等。
作用
  • 提高性能：减少不必要的计算，避免页面卡顿。
  • 优化用户体验：避免频繁的网络请求或重绘，提升响应速度。
实现

以下是一个简单的节流函数实现：

javascript 复制代码 
function throttle(func, limit) {
  let inThrottle;
  return function() {
    const context = this;
    const args = arguments;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}
示例

假设我们在滚动页面时需要实时更新一些数据，但为了避免频繁更新导致性能问题，我们可以使用节流技术。

html 复制代码 
<div style="height: 2000px; background: linear-gradient(to bottom, #f0f0f0, #c0c0c0);">
  <div id="scrollInfo">Scroll Position: 0</div>
</div>
<script>
  const scrollInfo = document.getElementById('scrollInfo');

  function updateScrollInfo() {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    scrollInfo.textContent = `Scroll Position: ${scrollTop}`;
  }

  const throttledUpdate = throttle(updateScrollInfo, 100);

  window.addEventListener('scroll', throttledUpdate);
</script>

在这个例子中，updateScrollInfo 函数会在每 100 毫秒内最多执行一次，从而减少了不必要的更新操作。

三、防抖与节流的对比

相同点
  • 目的：两者都旨在减少函数的执行次数，提高性能。
  • 应用场景：都适用于高频率触发的事件，如输入、滚动、窗口调整大小等。
不同点
  • 执行时机 ：
    • 防抖：在最后一次调用后等待一段时间再执行。
    • 节流：在指定的时间间隔内只执行一次。
  • 适用场景 ：
    • 防抖：适用于需要在一系列操作结束后才执行的场景。
    • 节流：适用于需要控制执行频率的场景。

四、高级应用

防抖与节流的组合使用

在某些复杂的场景下，可能需要同时使用防抖和节流来达到最佳效果。例如，在一个搜索框中，我们希望在用户停止输入一段时间后才发起请求，但如果用户持续输入，我们也希望每隔一段时间就发起一次请求。

javascript 复制代码 
function debounce(func, wait, immediate) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    const later = () => {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    const callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

function throttle(func, limit, trailing) {
  let lastTime = 0;
  return function() {
    const context = this;
    const args = arguments;
    const now = Date.now();
    if (now - lastTime >= limit) {
      func.apply(context, args);
      lastTime = now;
    } else if (trailing) {
      clearTimeout(lastTime);
      lastTime = setTimeout(() => {
        lastTime = 0;
        func.apply(context, args);
      }, limit - (now - lastTime));
    }
  };
}

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

function fetchSuggestions(query) {
  console.log('Fetching suggestions for:', query);
  // 模拟网络请求
  // fetch(`/api/suggestions?query=${query}`)
  //   .then(response => response.json())
  //   .then(data => {
  //     // 处理数据
  //   });
}

const debouncedThrottledFetch = throttle(debounce(fetchSuggestions, 300, true), 1000, true);

input.addEventListener('input', (event) => {
  const query = event.target.value;
  debouncedThrottledFetch(query);
});

在这个例子中，debouncedThrottledFetch 函数结合了防抖和节流的特点，既能在用户停止输入一段时间后发起请求，也能在用户持续输入时每隔一段时间发起一次请求。

五、实际应用案例

1. 搜索框自动补全

在一个电商网站的搜索框中，用户输入关键词时，系统会自动显示相关的搜索建议。为了减少网络请求次数，可以使用防抖技术。

html 复制代码 
<input type="text" id="searchInput" placeholder="Search...">
<ul id="suggestions"></ul>
<script>
  const input = document.getElementById('searchInput');
  const suggestions = document.getElementById('suggestions');

  function fetchSuggestions(query) {
    console.log('Fetching suggestions for:', query);
    // 模拟网络请求
    // fetch(`/api/suggestions?query=${query}`)
    //   .then(response => response.json())
    //   .then(data => {
    //     // 显示建议
    //     suggestions.innerHTML = data.map(item => `<li>${item}</li>`).join('');
    //   });
  }

  const debouncedFetch = debounce(fetchSuggestions, 300);

  input.addEventListener('input', (event) => {
    const query = event.target.value;
    debouncedFetch(query);
  });
</script>
2. 窗口调整大小

在响应式布局中，当窗口大小发生变化时，需要重新计算布局。为了避免频繁的计算，可以使用节流技术。

html 复制代码 
<div id="content" style="width: 100%; height: 100vh; background: linear-gradient(to right, #f0f0f0, #c0c0c0);"></div>
<script>
  const content = document.getElementById('content');

  function handleResize() {
    const width = window.innerWidth;
    const height = window.innerHeight;
    content.style.fontSize = `${width / 10}px`;
    content.textContent = `Width: ${width}, Height: ${height}`;
  }

  const throttledResize = throttle(handleResize, 100);

  window.addEventListener('resize', throttledResize);
</script>
3. 滚动加载更多

在无限滚动列表中，当用户滚动到页面底部时，会自动加载更多内容。为了避免频繁的加载请求，可以使用节流技术。

html 复制代码 
<div id="list" style="height: 2000px; overflow-y: auto;">
  <div v-for="item in items" :key="item.id" style="height: 100px; border-bottom: 1px solid #ccc;">{{ item.name }}</div>
</div>
<script>
  const list = document.getElementById('list');
  const items = [];

  function loadMore() {
    console.log('Loading more items...');
    // 模拟加载更多数据
    // fetch('/api/items')
    //   .then(response => response.json())
    //   .then(data => {
    //     items.push(...data);
    //   });
  }

  const throttledLoadMore = throttle(loadMore, 500);

  list.addEventListener('scroll', () => {
    if (list.scrollTop + list.clientHeight >= list.scrollHeight) {
      throttledLoadMore();
    }
  });
</script>

六、总结

防抖和节流是前端开发中非常实用的技术，能够有效地减少函数的执行次数，提高性能，优化用户体验。防抖适用于需要在一系列操作结束后才执行的场景，而节流适用于需要控制执行频率的场景。通过合理地使用这两种技术，可以显著提升应用的性能和响应速度。希望本文能帮助你更好地理解和掌握防抖与节流的相关知识。

相关推荐
暂时的12314 分钟前
一个十字翻转小游戏
前端·javascript·css·html
束尘17 分钟前
页面内容下载为pdf
前端·javascript·pdf
草明38 分钟前
Flutter EventBus
前端·javascript·flutter
星离～1 小时前
Css—实现3D导航栏
前端·css
疯狂的沙粒1 小时前
Vue 前端 el-input 如何实现输入框内容始终添加在尾部%
前端·javascript
小豆豆儿1 小时前
【Vue3】【Naive UI】＜n-message＞标签
前端·ui·vue·html
一殊酒1 小时前
【前端开发】JS+Vuew3请求列表数据并分页
前端·javascript·vue.js
景天科技苑1 小时前
【vue-router】Vue-router如何实现路由懒加载
前端·javascript·vue.js·vue-router路由懒加载·vue路由懒加载
new出一个对象2 小时前
uniapp App端在renderjs层渲染echarts获取不到service层id的问题
前端·uni-app·echarts
奔跑草-2 小时前
【前端】Next.js 服务器端渲染（SSR）与客户端渲染（CSR）的最佳实践
开发语言·前端·javascript·react.js·reactjs
热门推荐
01如何识别手机是否有灵动岛（dynamic island）02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04百度云盘发展历程与影响05Docker 夺命连环 15 问06PyTorch机器学习实现液态神经网络07电源管理入门-21 SoC芯片中的电源管理08玄机平台应急响应—webshell查杀09Coze扣子平台完整体验和实践（附国内和国际版对比）10昇腾多卡通信教程【配置网络检测对象IP】