【Vue】Vue项目需求--实现搜索框输入防抖处理

🦖欢迎观阅本本篇文章，我是Sam9029

---

⭐前言

在Vue开发中，遇到了搜索框输入防抖处理，算是防抖的使用场景之一吧，抽象其逻辑记录下来以备后用

场景需求

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

• 场景需求：
  • 搜索输入时 ，判断用户在输入完成后 实现即时的自动搜索
  • 并且要防止过度自动搜索消耗性能

想想如何才能在vue中实现

（一开始想着往标签上绑定函数事件，在事件本体里面实现防抖，并不能实现，真正解决思路如下）

具体思路

如下：

思路： 使用 watch + v-model

• v-model 实现数据输入的同步更新（数据想想绑定）
• watch 监听输入变化,使用防抖函数实现后续操作

---

🐉源码 （Vue-组合式API）

<template>
    <div class="searchCont">
      
    <!--    搜索input    -->
    <input type="text" placeholder="Search" v-model="keyword" />
    <!-- 展示v-model数据双向绑定      -->
    <div>
      <label for="">v-model测试：</label>{{keyword}}
    </div>
    </div>
</template>

<script setup>
import { getCurrentInstance, watch, ref } from "vue";
  
// 搜索数据的 防抖 处理
// v-model 加上 watch 监听
let keyword = ref()

// // 给搜索事件 绑定 防抖
// 因为 ⭐❗⭐❗防抖函数定义 返回的是一个回调函数, 我们可以用一个变量来接收
const searchInput = debounce(searchEvent,1000)

// 使用watch 监听变化
watch(keyword,()=>{
  searchInput()
  //注意，你可能会觉得 这样写可以,但是不可以，不可以，不可以
  // (debounce(searchEvent,1000))()
  // 因为这样做，你是在重复创建新的 防抖函数，所以会（一次改变就执行一次）不断执行
  //而放在变量里面就不是这样，每次调用变量执行相同地址的函数，及同一个防抖函数，
})

//搜索事件
function searchEvent(){
  console.log('执行搜索')
}
  

// //     防抖函数
function debounce(foo,delay){
  let timer;
  return function(){
      if(timer) clearTimeout(timer);
      timer = setTimeout(()=>{
          // 暂时理解不了（this，arguments）指向改变的问题
          foo.call(this,arguments)
          // 不输入延迟 则默认 1000 ms
      },delay || 1000)
  }
}

</script>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

• 需要选项式API 的源码请查看 选项式API实现-Vue项目需求–实现搜索框输入防抖处理

🐸源码解读

• 仔细阅读源码后，你会发现有这几个对象

• keyword 执行数据双向绑定，同步获取搜索框的值
• watch监听的keyword事件
• searchEvent 搜索事件（即需要被绑定防抖的搜索执行事件）
• searchInput 接收 防抖的回调函数 变量 （使得之后每次调用都是同一个本执行防抖绑定的搜索事件）
• debounce 防抖函数

• 需要注意的地方–使用变量来接收 防抖函数 返回的回调函数
  • 入此处不理解–请看【JS-工具类】防抖与节流—在定义时返回的是回调函数–sam9029
  • 以及 防抖函数源码
  • /⭐❗⭐❗防抖函数定义 返回的是一个回调函数, 我们可以用一个变量来接收

// // 给搜索事件 绑定 防抖
const searchInput = debounce(searchEvent,1000)
1
2

• 另一个需要注意的地方-使用watch监听的时候 调用 绑定了防抖的搜索事件

  • 注意，以下 这样写❗不可以,❗不可以，不可以，不可以

// 使用watch 监听变化
const searchInput = debounce(searchEvent,1000)
watch(keyword,()=>{
  //正确写法，调用 接收 绑定防抖的事件的 变量
  //searchInput() 
  //错误写法
  (debounce(searchEvent,1000))()
})
1
2
3
4
5
6
7
8

• (debounce(searchEvent,1000))()
• 因为这样做，你是在重复创建新的 防抖函数，所以会（一次改变就执行一次）不断执行
• 而放在变量里面就不是这样，每次调用变量执行相同地址的函数，及同一个防抖函数，

---

📕效果演示

• 额，gif图搞不起，先上CodePen.io 在线演示效果 （demo）

选项式API实现-Vue项目需求–实现搜索框输入防抖处理
组合式API实现-Vue项目需求–实现搜索框输入防抖处理-组合式API

拓展说明

• 关于防抖函数的更多内容 详情请看 我写的这一篇文章【JS-工具类】防抖与节流—在定义时返回的是回调函数–sam9029
  • 文章中还指出了 防抖函数 使用时 需要特别注意的地方（回调函数的调用方式）

参考：

js防抖的一些疑问解答:为什么addEventListener调用防抖可以，onClick不行
【JS-工具类】防抖与节流—在定义时返回的是回调函数–sam9029

**🐱‍🐉🐱‍🐉文章若有错误，敬请指正🙏**
1

---

🦖欢迎查阅Sam9029 的其他文章

🐸【Vue3-响应式工具API】ref 和 reactive 使用_Sam9029的博客-CSDN博客

🐸(Aixos的引入与基本使用_Sam9029的博客-CSDN博客

🐸【JS-工具类】懒加载的实现 – 两种方式 — 一种5行JS实现懒加载_Sam9029的博客-CSDN博客

**🐱‍🐉🐱‍🐉恭喜你，都看到这了，求赞，求收藏，求评论不过分吧**
1