js防抖debounce和节流throttling详解

0、前言

防抖和节流对于我们前端的性能优化上来说是一个必不可少的部分，也是面试出现频率极高的问题。本文将从防抖节流概念开始，到具体实现的代码解析，一步一步讲述如何实现防抖节流。

1、防抖（debounce）

1.1 概念

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

1.2 实现思路

思路：事件触发后开启一个定时器，如果事件在这个定时器限定的时间内再次触发，则清除定时器，在写一个定时器，定时时间到则触发。

function debounce(fn, t=500){
	let timer;
	return function(){
		// 如果有定时器，先清除
		if(timer) clearTimeout(timer);
		// 开启定时器
		timer = setTimeout(()=> {
			fn.apply(this, arguments);
		}, t)
	}
}

2、节流（throttle）

2.1 概念

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。

2.2 实现思路

思路：我们可以设计一种类似控制阀门一样定期开放的函数，事件触发时让函数执行一次，然后关闭这个阀门，过了一段时间后再将这个阀门打开，再次触发事件。

function throttle(fn, t=500) {
	let startTime = 0;
	return function() {
		let now = Date.now();
		if(now - startTime >= t) {
			fn();
			startTime = now;
		}
	}
}

3、总结

1. 防抖和节流相同点：

防抖和节流都是为了阻止操作高频触发，从而浪费性能。

2. 防抖和节流区别：

防抖是触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。适用于可以多次触发但触发只生效最后一次的场景。

节流是高频事件触发，但在n秒内只会执行一次，如果n秒内触发多次函数，只有一次生效，节流会稀释函数的执行频率。

3. 使用场景

防抖: input框搜索联想词、登录、点击按钮提交表单…
节流: scroll滑动事件、resize浏览器窗口改变事件、mousemove鼠标移动事件、文档编辑隔一段时间自动保存…