使用节流函数防止请求重复发送

在注入输入框监听的事件中,快速的输入可能会导致请求频繁发送

构造节流函数

  • 节流函数接收两个参数,一个是待执行方法体,一个是延迟时间
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export function debounce(func, delay) {
	// 定义一个timer用于控制延迟
	let timer

	return function (...args) {
		// 定时器存在则清空
		if (timer) {
			clearTimeout(timer)
		}

		// 初始化定时器
		timer = setTimeout(() => {
			// 在延迟达到或调用原有时间
			func.apply(this, args)
		}, delay)
	}
}

运用节流函数

  • 在 Vue 的监听中可以使用节流函数来派发监听方法
  • 表示才 200 毫秒内重复触发该方法,不会重复派发
1
2
3
this.$watch('query', debounce((newQuery) => {
	this.$emit(query, newQuery)
}, 200))