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

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

vue移动端 利用防抖的原理 ---实现搜索页面防抖操作_第1张图片

防抖:

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

此次应用于搜索框防抖操作:

1. 在 搜索组件 ---输入框绑定一个事件

vue移动端 利用防抖的原理 ---实现搜索页面防抖操作_第2张图片

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

vue移动端 利用防抖的原理 ---实现搜索页面防抖操作_第3张图片

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

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

},300)
  }
}

你可能感兴趣的:(vue项目,前端)