vue中的防抖实战

业务情景： 当用户搜索时需要根据用户输入的内容实时查询，但是又不想输入每个字都查询
或者实时保存用户的输入信息。

防抖原理：
当持续触发事件时，设置一个间隔时间，当该时间内没有再次触发事件则执行一次函数，如果时间到之前再次触发事件，则重新开始延时。

防抖作用
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。

要实现这种实时保存或者查询也可以通过节流的方式实现，节流的原理是每隔一个固定时间触发一次事件。