Vue实战指南 函数去抖和函数节流

在前端开发中，经常需要处理用户输入或频繁触发的事件，比如窗口大小变化、滚动条滚动、输入框输入等。如果不加以控制，这些事件可能会导致性能问题，甚至影响用户体验。为此，开发者常常使用函数去抖（debounce）和函数节流（throttle）技术来优化事件处理逻辑。本文将详细介绍这两种技术的基本概念、作用及其实现方式，并通过具体示例来展示它们在 Vue.js 中的应用。

基本概念与作用说明

函数去抖（Debounce）

函数去抖是指在一系列连续的事件触发后，只有在最后一次事件触发后的某个时间间隔内不再有新的事件触发时，才执行一次函数。这可以有效减少因短时间内频繁触发事件而导致的性能损耗。

函数节流（Throttle）

函数节流是指在一段时间内只允许执行一次函数。无论在这段时间内触发了多少次事件，都只会执行一次函数。这同样有助于提高程序的性能。

示例一：函数去抖的实现

下面是一个简单的函数去抖的实现方式，可以用于限制在一定时间内重复执行某段代码。

function debounce(func, wait) {
   
   
  let timeoutId;

  return function() {
   
   
    const context = this;
    const args = arguments;
    
    clearTimeout(timeoutId);
    timeoutId = setTimeout(function() {
   
   
      func.apply(context, args);
    }, wait);
  };
}

这个函数接收两个参数：func 是需要去抖的函数，wait 是等待的时间间隔（毫秒）。返回的是一个包装后的函数，该函数会在最后一次调用后的 wait 时间内没有新的调用时执行 func。

Vue 示例

假设我们需要在一个输入框中限制用户输入频率。

<template>
  <div>
    <input type="text" v-model="inputValue" @input="debouncedInputHandler">
    <p>输入值：{
  
  { inputValue }}</p>
  </div>
</template>

<script>
import {
     
      debounce } from './utils'; // 假设这是上面定义的 debounce 函数

export default {
     
     
  data() {
     
     
    return {
     
     
      inputValue: ''
    };
  },
  methods: {
     
     
    inputHandler