防抖和节流

在 Vue 项目中实现防抖（debounce）和节流（throttle）是处理频繁触发事件（如输入框的输入、窗口的缩放、滚动、按钮的点击等）时常用的技巧。这些技巧有助于提高应用的性能和用户体验。

防抖

防抖用于延迟处理事件，直到事件停止触发一段时间后才执行。这对于减少高频率的操作（如用户输入）特别有效。

实现方式

1. 使用 lodash 库

npm install lodash --save

import _ from 'lodash';    // 全部引入
//import debounce from 'lodash/debounce';   // 按需引入
 
export default {
  data() {
    return {
      searchQuery: ''
    };
  },
  methods: {
    // 防抖处理函数
    debounceSearch: _.debounce(function() {
      this.search();
    }, 300), // 300ms 延迟

    search() {
      // 搜索逻辑
      console.log('Searching:', this.searchQuery);
    }
  }
}

<template>
  <div>
    <input v-model="searchQuery" @input="debounceSearch" placeholder="Search...">
  </div>
</template>

2. 手动实现防抖

export default {
  data() {
    return {
      searchQuery: '',
      debounceTimer: null
    };
  },
  methods: {
    debounceSearch() {
      clearTimeout(this.debounceTimer);
      this.debounceTimer = setTimeout(() => {
        this.search();
      }, 300); // 300ms 延迟
    },

    search() {
      // 搜索逻辑
      console.log('Searching:', this.searchQuery);
    }
  }
}

<template>
  <div>
    <input v-model="searchQuery" @input="debounceSearch" placeholder="Search...">
  </div>
</template>

节流

节流用于限制事件处理函数的调用频率，确保在固定时间间隔内只执行一次。这对于频繁触发的事件（如滚动、窗口调整大小）很有用。

1. 使用 lodash 库

import _ from 'lodash';

export default {
  methods: {
    // 节流处理函数
    throttleScroll: _.throttle(function() {
      this.handleScroll();
    }, 100), // 100ms 间隔

    handleScroll() {
      // 处理滚动逻辑
      console.log('Scrolling...');
    }
  }
}

<template>
  <div @scroll="throttleScroll">
    <!-- 内容 -->
  </div>
</template>

2. 手动实现节流

export default {
  data() {
    return {
      throttleTimer: null
    };
  },
  methods: {
    throttleScroll() {
      if (this.throttleTimer) return;

      this.throttleTimer = setTimeout(() => {
        this.handleScroll();
        this.throttleTimer = null;
      }, 100); // 100ms 间隔
    },

    handleScroll() {
      // 处理滚动逻辑
      console.log('Scrolling...');
    }
  }
}

<template>
  <div @scroll="throttleScroll">
    <!-- 内容 -->
  </div>
</template>

防抖（Debounce）：适用于用户操作频繁且希望在操作停止后再处理的情况，例如搜索框输入、表单验证、窗口大小调整等。
节流（Throttle）：适用于需要限制事件处理频率的情况，例如滚动事件、拖拽操作、窗口大小调整等。