防抖、节流的简单使用

1、防抖(debounce)

• 如果在1000ms内没有再次触发事件，那么就执行函数
  如果在1000ms内再次触发事件，那么当前的计时取消，重新开始计时

效果：如果短时间内大量触发同一事件，执行时间会一直推迟，直到最后一次触发开始计时，1000ms后执行一次函数。

（如果一直触发，直到最后一次触发后的1秒，执行一次函数）

function() {
	if (this.timer) {
		clearTimeout(this.timer)
	}
	this.timer = setTimeout(() => {
		console.log('防抖(debounce)')
	}, 1000)
}

2、节流(throttle)

• 类似控制阀门一样定期开放的函数，也就是让函数执行一次后，在1000ms内（自定义时间段）暂时失效，过了这段时间后再重新激活

效果：如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。

（如果一直触发，每1秒执行一次）

data() {
	return {
		valid: true
	}
}

function() {
	if (!this.valid) {
		return false
	} else {
		this.valid = false
		setTimeout(() => {
			console.log('节流(throttle)')
			this.valid = true
		}, 1000)
	}
}

应用场景举🌰

• 1、搜索框input事件，例如要支持输入实时搜索可以使用节流方案（间隔一段时间就必须查询相关内容），或者实现输入间隔大于某个值（如500ms），就当做用户输入完成，然后开始搜索，具体使用哪种方案要看业务需求。

• 2、页面resize事件，常见于需要做页面适配的时候。需要根据最终呈现的页面情况进行dom渲染（这种情形一般是使用防抖，因为只需要判断最后一次的变化情况）