Vue 入门攻略：搜索框防抖指南

前端

2023-11-12 04:42:46

前言

在 Vue 开发中，搜索框输入防抖处理是一个常见的需求场景。防抖是指在一段时间内，如果连续多次触发某个事件，只会执行一次相应的处理函数。这可以有效减少不必要的函数调用，从而提高性能和用户体验。

场景需求

作为开发人员，一定要先搞清楚场景需求是什么。

场景需求：

搜索输入时，判断用户是否停止输入一段时间后，再触发搜索操作。

原理及实现

要实现搜索框输入防抖，需要使用 JavaScript 的 setTimeout() 函数和 clearTimeout() 函数。setTimeout() 函数会在指定的时间后执行一次函数，而 clearTimeout() 函数可以取消正在等待执行的 setTimeout() 函数。

具体实现步骤如下：

在 mounted() 生命周期钩子中，创建一个 timer 变量来存储 setTimeout() 函数的返回值。
在 input 事件处理函数中，如果 timer 存在，则使用 clearTimeout() 函数取消它。
在 input 事件处理函数中，使用 setTimeout() 函数创建一个新的 timer，并在指定的时间后触发搜索操作。

以下是代码示例：

<template>
  <input type="text" v-model="query" @input="handleInput" />
</template>

<script>
export default {
  data() {
    return {
      query: '',
      timer: null,
    }
  },
  mounted() {
    this.timer = null;
  },
  methods: {
    handleInput() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        // 在这里触发搜索操作
        this.search();
      }, 300);
    },
    search() {
      // 在这里执行搜索操作
    },
  },
};
</script>