用防抖，写一个简洁 элегант的Vue项目，做到真正的写到用到学到，一举三得！

前端

2023-12-31 06:09:02

正文

大家好，我是YXC，一个乐于分享的码农。

今天，我想和大家分享一下我在 Vue 项目中使用防抖函数的经验。

一、认识防抖函数

防抖函数，顾名思义，就是延迟函数的执行。它可以有效地减少不必要的函数调用，特别是在处理快速、连续的事件时。

二、防抖函数在 Vue 项目中的应用

我们在实际开发中，会有很多需要防抖的场景。比如：

输入框的搜索建议：当用户在输入框中输入时，我们不希望每次输入都触发搜索请求，而是等到用户停止输入一段时间后才触发。
窗口的滚动事件：当用户滚动窗口时，我们不希望每次滚动都触发窗口滚动事件，而是等到用户停止滚动一段时间后才触发。

三、如何实现防抖函数

实现防抖函数的方法有很多，常用的方法有：

定时器方法 ：

定时器方法是实现防抖函数最简单的方法。我们可以使用setTimeout()函数来延迟函数的执行。

function debounce(func, wait) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

时间戳方法 ：

时间戳方法也是实现防抖函数的常用方法。我们可以使用Date.now()函数来获取当前时间戳，然后与上一次执行函数的时间戳进行比较。如果当前时间戳与上一次执行函数的时间戳相差超过了指定的等待时间，则执行函数。
```
function debounce(func, wait) {
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime > wait) {
      func.apply(this, args);
      lastTime = now;
    }
  };
}
```

四、在 Vue 项目中使用防抖函数

在 Vue 项目中，我们可以使用防抖函数来优化组件的性能。

比如，我们可以使用防抖函数来优化输入框的搜索建议组件。当用户在输入框中输入时，我们不希望每次输入都触发搜索请求，而是等到用户停止输入一段时间后才触发。

我们可以使用以下代码来实现：

import { debounce } from 'lodash';

export default {
  data() {
    return {
      searchQuery: '',
      debounceSearch: debounce(this.search, 500),
    };
  },
  methods: {
    search(query) {
      // 发送搜索请求
    },
  },
  watch: {
    searchQuery(val) {
      this.debounceSearch(val);
    },
  },
};