彻底学会防抖和节流

正在奋斗的程序猿

于 2024-09-12 23:13:35 发布

阅读量414

点赞数 7

分类专栏： Vue 文章标签：前端 vue.js 学习

本文链接：https://blog.csdn.net/m0_74293254/article/details/142187471

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Vue 3 中使用防抖（Debounce）和节流（Throttle）

防抖（Debounce）示例

节流（Throttle）示例

在前端开发中，性能优化是一个非常重要的课题，尤其是在处理用户与网页的频繁交互时。防抖（Debounce）和节流（Throttle）是两种常用的技术手段，用于优化高频率执行的代码，确保应用的响应既迅速又高效。虽然它们的目的相似，但它们的工作原理和适用场景有所不同。

防抖（Debounce）

定义：防抖是指在事件被触发后，等待一段时间（例如 n 毫秒），如果在这段时间内没有再次触发该事件，则执行相应的操作；如果在等待时间内事件再次被触发，则重新计时。

工作原理：

当事件首次触发时，设置一个定时器，等待 n 毫秒。
如果在 n 毫秒内事件再次被触发，则清除之前的定时器，并重新设置一个新的定时器。
只有在 n 毫秒内没有再次触发事件时，才会执行相应的操作。

适用场景：

输入框搜索：用户在输入框中输入内容时，通常不希望每次按键都触发搜索请求，而是希望在用户停止输入一段时间后才发起请求。
窗口大小调整：当用户调整浏览器窗口大小时，不希望每次调整都触发布局计算，而是在用户停止调整后才进行计算。
按钮点击：防止用户在短时间内多次点击按钮导致重复操作。

节流（Throttle）

定义：节流是指在一定时间间隔内，无论事件被触发多少次，只执行一次操作。

工作原理：

当事件首次触发时，立即执行相应的操作，并设置一个定时器，等待 n 毫秒。
在 n 毫秒内，即使事件再次被触发，也不会执行操作。
只有在 n 毫秒后，事件再次被触发时，才会重新执行操作。

适用场景：

滚动事件：当用户滚动页面时，不希望每次滚动都触发事件处理函数，而是希望在一定时间间隔内只执行一次。
鼠标移动：当用户移动鼠标时，不希望每次移动都触发事件处理函数，而是希望在一定时间间隔内只执行一次。
频繁的API调用：例如在游戏中，控制角色的移动，希望在一定时间间隔内只执行一次移动操作。

如何选择使用防抖和节流？

防抖：适用于用户操作停止后才需要执行的场景，例如输入框搜索、窗口大小调整等。防抖确保只有在用户停止操作一段时间后才会执行相应的操作。
节流：适用于需要控制事件执行频率的场景，例如滚动事件、鼠标移动等。节流确保在一定时间间隔内只执行一次操作，避免频繁触发。

总结

防抖：在用户停止操作一段时间后执行操作。
节流：在一定时间间隔内只执行一次操作。

Vue 3 中使用防抖（Debounce）和节流（Throttle）

在 Vue 3 中使用防抖（Debounce）和节流（Throttle）可以通过自定义指令或直接在方法中使用防抖和节流函数来实现。

防抖（Debounce）示例

假设我们有一个输入框，当用户停止输入一段时间后，我们希望触发一个搜索操作。

<template>
  <div class="search-container">
    <input v-model="searchQuery" @input="debouncedSearch" placeholder="搜索..." class="search-input" />
  </div>
</template>

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

// 定义搜索查询的绑定变量
const searchQuery = ref('');

// 使用防抖动函数来限制搜索的频率
const debounce = (func, wait) => {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
};

// 定义实际的搜索函数
const search = () => {
  console.log('Search triggered with query:', searchQuery.value);
  // 这里可以调用搜索 API
};

// 创建一个防抖动版本的搜索函数，以减少搜索请求的频率
const debouncedSearch = debounce(search, 300);
</script>

<style scoped>
.search-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.search-input {
  width: 300px;
  padding: 10px 15px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 25px;
  outline: none;
  transition: border-color 0.3s ease;
}

.search-input:focus {
  border-color: #007bff;
}
</style>

节流（Throttle）示例

假设我们有一个滚动容器，用于显示大量内容。我们希望在一定时间间隔内只执行一次滚动处理函数。

<template>
  <div class="scroll-container" @scroll="throttledScroll">
    <p v-for="i in 100" :key="i" class="scroll-item">{{ i }}</p>
  </div>
</template>

<script setup>
// 节流函数，用于控制函数调用频率
const throttle = (func, wait) => {
  let lastTime = 0;
  return function (...args) {
    const now = new Date().getTime();
    if (now - lastTime >= wait) {
      func.apply(this, args);
      lastTime = now;
    }
  };
};

// 处理滚动事件的函数
const handleScroll = () => {
  console.log('Scroll event handled');
  // 这里可以处理滚动事件
};

// 使用节流函数处理滚动事件
const throttledScroll = throttle(handleScroll, 300);
</script>

<style scoped>
.scroll-container {
  height: 200px;
  overflow-y: scroll;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  background-color: #f9f9f9;
}

.scroll-item {
  padding: 5px 0;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  color: #333;
}

.scroll-item:last-child {
  border-bottom: none;
}
</style>