防抖与节流 - 技术栈

防抖

当某个事件触发时，等待一段时间再执行函数。如果在这段时间内事件再次被触发，那么就重新计时，换句话说，防抖可以确保函数在事件结束后才被执行，避免了多次触发。

应用场景：

搜索框输入：用户在输入时，防止每个字符都发起一次请求。
窗口调整：在窗口大小变化时，避免频繁触发事件。

javascript 复制代码

function debounce(func, delay) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);  // 每次事件触发时，清除上一次的延时
    timeout = setTimeout(() => {
      func.apply(this, args);  // 在延时后执行函数
    }, delay);
  };
}

// 示例：用户输入时防抖，避免频繁调用
const searchInput = document.querySelector('#search');
const handleSearch = debounce(function () {
  console.log('搜索:', searchInput.value);
}, 500); // 延时 500ms 执行

searchInput.addEventListener('input', handleSearch);

节流

在固定时间间隔内，确保事件触发的函数最多只执行一次，换句话说，节流可以确保事件触发时，不管多频繁，只有在一定的时间间隔内才执行一次函数。

应用场景：

滚动事件：比如监听页面滚动，避免因每次滚动触发高频率的事件。
按钮点击：控制按钮在短时间内不能被多次点击，避免重复提交。

javascript 复制代码

function throttle(func, delay) {
  let lastTime = 0;
  return function (...args) {
    const now = new Date().getTime();
    if (now - lastTime > delay) {  // 确保每隔一定时间才执行一次
      func.apply(this, args);
      lastTime = now;
    }
  };
}

// 示例：滚动时节流，避免频繁触发事件
const handleScroll = throttle(function () {
  console.log('滚动位置:', window.scrollY);
}, 1000); // 每 1000ms 执行一次

window.addEventListener('scroll', handleScroll);

总结

|--------|-----------------|--------------------|
| 特性/对比 | 防抖（Debounce） | 节流（Throttle） |
| 事件触发频率 | 等待停止触发后再执行 | 在固定时间间隔内执行一次 |
| 主要用途 | 用于高频事件，如输入框、搜索等 | 用于持续事件，如滚动、窗口大小调整等 |
| 执行时机 | 最后一次触发后延迟执行 | 固定间隔内执行一次 |
| 触发条件 | 触发事件停止后执行 | 固定时间间隔内触发一次 |

案例

效果

代码

javascript 复制代码

<template>
  <div>
    <input type="text" id="search" v-model="searchValue" placeholder="请输入搜索内容">
    <div id="scrollDiv" style="height: 3000px; background-color: lightgray;"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

// 防抖函数
function debounce (func, delay) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 节流函数
function throttle (func, delay) {
  let lastTime = 0;
  return function (...args) {
    const now = new Date().getTime();
    if (now - lastTime > delay) {
      func.apply(this, args);
      lastTime = now;
    }
  };
}

// 搜索输入框的值
const searchValue = ref('');

// 防抖示例
const searchHandler = debounce(() => {
  console.log('搜索内容:', searchValue.value);
}, 500);

// 节流示例
const scrollHandler = throttle(() => {
  console.log('当前滚动位置:', window.scrollY);
}, 1000);

onMounted(() => {
  const searchInput = document.querySelector('#search');
  searchInput.addEventListener('input', searchHandler);

  window.addEventListener('scroll', scrollHandler);
});

onUnmounted(() => {
  const searchInput = document.querySelector('#search');
  searchInput.removeEventListener('input', searchHandler);

  window.removeEventListener('scroll', scrollHandler);
});
</script>

<style></style>