效果目标:搜索页面防抖操作
防抖:
- 原理:在事件被触发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)
}
}