写点什么

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

作者:Sam9029
  • 2022 年 9 月 12 日
    四川
  • 本文字数:1887 字

    阅读完需:约 6 分钟

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

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

Sam9029 的 InfoQ 主页:Sam9029 (infoq.cn)

**🐱‍🐉🐱‍🐉恭喜你,若此文你认为写的不错,不要吝啬你的赞扬,求收藏,求评论,求一个大大的赞!👍**


⭐前言

在 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>

复制代码



🐸源码解读

    • keyword 执行数据双向绑定,同步获取搜索框的值

    • watch 监听的 keyword 事件

    • searchEvent 搜索事件(即需要被绑定防抖的搜索执行事件)

    • searchInput 接收 防抖的回调函数 变量 (使得之后每次调用都是同一个本执行防抖绑定的搜索事件)

    • debounce 防抖函数

  • 需要注意的地方--使用变量来接收 防抖函数 返回的回调函数

  • 入此处不理解--请看【JS-工具类】防抖与节流---在定义时返回的是回调函数--sam9029

  • 以及 防抖函数源码

  • /⭐❗⭐❗防抖函数定义 返回的是一个回调函数, 我们可以用一个变量来接收


// // 给搜索事件 绑定 防抖const searchInput = debounce(searchEvent,1000)
复制代码


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

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


// 使用watch 监听变化const searchInput = debounce(searchEvent,1000)watch(keyword,()=>{  //正确写法,调用 接收 绑定防抖的事件的 变量  //searchInput()   //错误写法  (debounce(searchEvent,1000))()})
复制代码


  • (debounce(searchEvent,1000))()

  • 因为这样做,你是在重复创建新的 防抖函数,所以会(一次改变就执行一次)不断执行

  • 而放在变量里面就不是这样,每次调用变量执行相同地址的函数,及同一个防抖函数,



📕效果演示

拓展说明


参考:


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


**🐱‍🐉🐱‍🐉文章若有错误,敬请指正🙏**
复制代码



🦖我是 Sam9029,一个前端,坚信应无所往

文章若有错误,敬请指正🙏

**🐱‍🐉🐱‍🐉恭喜你,都看到这了,求收藏,求评论,求一个大大的赞👍!不过分吧**

Sam9029 的 InfoQ 主页:Sam9029 (infoq.cn)

**🐱‍🐉🐱‍🐉恭喜你,都看到这了,求赞,求收藏,求评论不过分吧**
复制代码


发布于: 刚刚阅读数: 5
用户头像

Sam9029

关注

庸俗 2022.09.03 加入

好色

评论

发布
暂无评论
【Vue】Vue项目需求--实现搜索框输入防抖处理_JavaScript_Sam9029_InfoQ写作社区