防抖和节流

防抖和节流

防抖和节流是前端开发工作中经常会出现的场景。防抖是指一些高频事件被多次触发后，只响应最后一次被触发的事件。如常见的输入框的远程搜索功能，当用户持续不断的输入需要远程搜索的内容时，如果每输入一次就触发一次远程搜索，会发送多个不必要的请求，更有甚者前面发的请求后返回而覆盖后面请求先返回的数据，导致搜索的内容有出入，因此，必须使用防抖解决。而节流是指高频触发事件被多次触发，只响应第一次触发的事件，后面继续触发的事件必须等到第一次事件触发结束后才会继续响应。如王者荣耀中释放一次技能后就不能再继续释放技能，此处也使用了截流。

防抖实现

cost debounce = (fun, delay) => {
	const timer = null;
	return () => {
		clearTimeout(timer);
		timer = setTimeout(() => {
			fun.call(this, arguments);
			clearTimeout(timer);
		}， delay)
	}
}

节流实现

const throttle = (fun, delay) => {
	let timer = null;
	return () => {
		if (timer) {
			return;
		}
		timer = setTimeout(() => {
			fun.call(this, arguments);
			clearTimeout(timer);
		}, delay)
	}
}

总结：

（1）相同点：防抖和接流都是应用在高频事件场景中，避免事件被高频触发导致系统出现性能问题或是产生bug；两者都可以采用闭包存储一个定时器timer，通过定时器状态判断是否继续响应高频事件。
（2）不同点：防抖只响应高频触发事件最后一次被触发的事件，截流只响应高频触发事件被第一次被触发的事件。