关于节流与防抖

Hush755

已于 2024-02-20 17:15:17 修改

阅读量830

点赞数 17

文章标签：前端 vue.js javascript

于 2024-02-20 15:31:13 首次发布

本文链接：https://blog.youkuaiyun.com/qq_61723274/article/details/136188883

版权

一、基本概念

节流和防抖是两种常见的前端性能优化技术，用于控制函数的执行频率,可以避免频繁触发函数，减少不必要的请求或计算。

节流:是指在一定时间段内，对于相同的事件，只会执行一次回调函数。与防抖不同的是，节流会在每个时间段的开始时立即执行回调函数，而不是等待事件停止触发。因此，节流的特点是控制执行频率，确保在一定时间段内只执行一次回调函数。

防抖:防抖是指在一个时间段内，对于相同的事件，只会执行一次回调函数。如果在这个时间段内有多次事件触发，则只有最后一次事件会被执行。因此，防抖的特点是延迟执行，确保只有在事件停止触发后才执行回调函数

拿个现实中的示例说明: 在王者荣耀中的我们可以触发英雄的技能和回城,

节流就是说我们在使用技能(触发事件)，技能的效果（看做执行函数）时马上释放的(函数马上执行也可能有一点延迟时间)技能会进入冷却状态（一定时间间隔），在此期间再次点击技能(再次触发事件)不会释放技能(函数不会执行)，即规定时间只能触发一次事件、在此期间触发事件会被忽略。

防抖就是说我们点击回城（触发事件），回程加血(看做执行函数)是过一段时间才到家才执行的(函数过一段时间执行)，在回城期间（一定时间间隔）再次点击了回城（再次触发事件），回城被打断并重新回城(重新计时)。

注意: 节流和防抖时间触发函数都可立即和延时执行，节流的立即执行只是某段时间开始的执行。触发函数的时机是可定的、本质区别事件触发时在于一个是时间没到不鸟你、一个是时间没到重新计时

二、常见的应用场景

1、节流

页面滚动事件：当用户滚动页面时触发事件，使用节流可以控制滚动事件处理函数的执行频率，避免频繁执行导致性能问题。
搜索框输入联想：当用户在搜索框输入文字时，可以使用节流来限制发送请求的频率，减少请求次数，提高用户体验。
窗口大小调整：当用户调整窗口大小时触发事件，使用节流可以确保在一定时间间隔内只执行一次处理函数，避免多次重复计算。

2、防抖

页面滚动事件：当用户滚动页面时触发事件，使用节流可以控制滚动事件处理函数的执行频率，避免频繁执行导致性能问题。
搜索框输入联想：当用户在搜索框输入文字时，可以使用节流来限制发送请求的频率，减少请求次数，提高用户体验。
窗口大小调整：当用户调整窗口大小时触发事件，使用节流可以确保在一定时间间隔内只执行一次处理函数，避免多次重复计算。

三、示例演示

这里拿输入框模糊搜索减少网络请求举例(查询包含输入框的值的数据)

1、代码

<template>
  <div>
    <input type="text" v-model="searchQuery" @input="handleSearch">
    <ul>
      <li v-for="result in searchResults" :key="result.id">{{ result.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      searchQuery: '',
      searchResults: []
    };
  },
  methods: {
    // 节流函数，控制请求发送的频率
    throttle(func, delay) {
      let timer = null;
      return function() {
        if (!timer) {
          timer = setTimeout(() => {
            func.apply(this, arguments);
            timer = null;
          }, delay);
        }
      };
    },
    // 防抖函数，延迟请求发送时间
    debounce(func, delay) {
      let timer = null;
      return function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
          func.apply(this, arguments);
        }, delay);
      };
    },
    
    async fetchData(query) {
      try {
        const response = await axios.get(`https://127.0.0.1:3000/search?q=${query}`);
        this.searchResults = response.data.results;
      } catch (error) {
        console.error('错误信息:', error);
      }
    },
    handleSearch() {
      // 结合节流和防抖实现
      const throttled = this.throttle(this.fetchData, 500);
      const debounced = this.debounce(throttled, 500);

      debounced(this.searchQuery);
    }
  }
};
</script>