简单认识 防抖与节流

防抖

防抖策略： 是当事件被触发后，延迟 n 秒后再执行 回调，如果在这 n 秒内 事件又被触发，则会 重新计时

防抖的常用场景： 用户在输入框中连续输入一串字符时，可以通过 防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求此时，节约请求资源

// 定义 计时器 变量
var timer = null
// 定义 防抖 的函数
function debounce(key) {
	timer = setTimeout(function() {
		/* 执行代码片段 */
	},500)
}
// 防抖事件的触发
document.querySelector("button").onclick = function() {
	clearTimeout(timer)		// 在触发点击事件后，立即清空 timer
	/* 执行代码片段 */
	debounce(key)
}

节流

节流： 可以减少一段时间内 事件的触发频率

节流阀 为空，表示可以执行下次操作；不为空，表示不能执行下次操作

当前操作实行完之后，必须将 节流阀 重置为空，表示可以执行下次操作了

每次 执行操作之前，必须 先判断 节流阀是否为空

节流的常用场景：

鼠标连续不断的触发某事件(如 点击)，只在单位事件内只触发一次

懒加载 时要监听计算 滚动条 的位置，但没必要每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源

使用节流阀优化鼠标跟随效果

// 引用 jQuery 文件
$(function() {
	let timer = null	// 预定义一个 timer 节流阀
	$(document).on("mousemove", function(e) {
	// 判断节流阀是否为空，如果不为空，则证明距离上次执行间隔不足 16 ms
		if (timer) { return }	
		timer = setTimeout(function() {
			$("img").css("left", e.pageX + "px").css("top", e.pageY + "px")
			timer = null
		},16)
	})
})

防抖与节流的区别

防抖： 如果事件被频繁触发，防抖能保证 只有最近一次触发才会生效，前面 N 多次的触发都会被忽略

节流： 如果事件被频繁触发，节流能够 减少事件触发的频率，，因此，节流是 有选择性的 执行一部分事件