vue项目|vue移动端利用防抖的原理 ---实现搜索页面防抖操作 vue项目|前端

效果目标：搜索页面防抖操作

文章图片

防抖：

原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
适用场景：
- 按钮提交场景：防止多次提交按钮，只执行最后提交的一次
- 搜索框联想场景：防止联想发送请求，只发送最后一次输入

此次应用于搜索框防抖操作：
1. 在搜索组件 ---输入框绑定一个事件

文章图片

2.在data 里设置一个防抖的定时器，timer:null

文章图片

3.在methods 里进行改变触发事件，用clearTimeout清楚上次的---->setTimeout 设置延迟

methods:{ //输入框-内容实时改变触发事件方法 inputFn(){ clearTimeout(this.timer)//清除上一次的 //防抖：延时执行逻辑代码,事件再次触发时，清楚上一个定时器 this.timer= setTimeout(()=>{ if(this.kw.length===0) return console.log(this.kw)},300) } }

【vue项目|vue移动端利用防抖的原理 ---实现搜索页面防抖操作】