业务情景: 当用户搜索时需要根据用户输入的内容实时查询,但是又不想输入每个字都查询
或者实时保存用户的输入信息。
防抖原理:
当持续触发事件时,设置一个间隔时间,当该时间内没有再次触发事件则执行一次函数,如果时间到之前再次触发事件,则重新开始延时。
防抖作用
1、对服务器来说:可以防止短时间多次请求接口,一定程度上减轻服务器压力。
2、对前端页面来说:可以防止页面抖动,减轻浏览器压力,提升性能。特别是监听scroll时,抖动最明显。
防抖前后效果
防抖前:
防抖后:
送上代码:
<input type="text" v-model="title" @input="saveAll" />
export default {
data () {
return {
timer: null, // 用于临时存放计时器
}
},
methods: {
// 存草稿(进行了防抖处理)
saveAll (e) {
if (this.timer) {
clearTimeout(this.timer);
}
this.timer = setTimeout(() => {
console.log(e.detail.value)
}, 1000)
}
}
}
注解:
我这里设的是1s延时,也就是说,当用户在第一次输入后不到1s的时间再次输入,计时器会重新计时,不会触发console,而当用户输入后的1s内没有再次输入则触发一次console。
要实现这种实时保存或者查询也可以通过节流的方式实现,节流的原理是每隔一个固定时间触发一次事件。