js防抖与节流

要清楚防抖与节流的实现，首先要明白防抖与节流的概念是什么

1、防抖
防抖：当一个事件在一个连续时间内多次执行的时候，只有在最后一次事件触发大于规定时间（delay）的时候，才执行该事件。
实际举例：比如浏览器窗口大小更改的时候（onresize事件），我们需要执行一个函数，如果这个函数足够“卡顿”的话，那么频繁执行的话会感觉到明显的卡顿，比如：

	// 实现一个阻塞函数
	let sleep = (delay = 500) => {
		let t = Date.now();
		while(Date.now() - t <= delay) {
			continue;
		}
	};
	
	let func = () => {
		sleep();
		console.log("I am ready...");
	};
  	window.onresize = func;

将这段代码复制到控制台执行后并进行窗口大小的改变，我们可以明显的看出来界面上的卡顿（单线程的原理，具体原因后续再说）。如果频繁执行这种阻塞主线程的任务的话，很明显是不合理的。这个时候防抖就排上用场了

	// 实现一个阻塞函数
	let sleep = (delay = 500) => {
		let t = Date.now();
		while(Date.now() - t <= delay) {
			continue;
		}
	};
	
	let func = () => {
		sleep();
		console.log('I am ready...');
	};
	// fn是待执行的函数，delay是概念描述中的规定时间
	let debounce = (fn, delay = 200) => {
		let timer = null; // 定时器；也可以通过时间戳的方式实现，这里不做赘述
		return function() {
			clearTimeout(timer);
			timer = setTimeout(() => {
				fn(); // 直接执行，这里没做this指向的相关，主要理解的还是防抖的原理
				timer = null;
			}, 200);
		}
	};
  	window.onresize = debounce(func);

这次就能明显的看出来界面上面没有卡顿（是因为sleep等待dom渲染完成后的200ms才执行的）。并且同时可以看出来，func函数只执行了一次。

2、节流
节流：当一个事件在一个连续时间内多次执行的时候，在一个规定时间内，只有第一次触发事件的时候才会执行这个函数
实际举例：当我们提交一个表单的，点击提交按钮的时候，如果不做任何处理，也就是点击几次就执行几次，这个时候会向后台发送多次请求，很明显是不合理的。我们通过在页面上模拟下

	let func = () => {
		console.log('i exec');
	};
	document.onclick = func;

当我们快速连续点击的时候，点击几次就执行几次。如果这个console是网络请求的话，很明显会发送多个网络请求。

	let func = () => {
		console.log('i exec');
	};
	let throttle = (fn, wait = 1000) => {
		let timer = null;
		let flag = false; // 标记是否首次执行
		return function() {
			if(flag === false) { // 如果不需要首次立刻执行的话，这段代码可以删掉
				flag = true;
				fn(); // 首次立马执行，不需要等待延迟
				return;
			}
			if(timer === null) {
				timer = setTimeout(() => {
					fn();
					timer = null;
				}, wait);
			}
		}
	};
	document.onclick = throttle(func);

可以发现，事件执行1秒内最多只会执行一次；

以上就是有关节流和防抖的相关内容，代码都可以直接复制到浏览器的控制台进行执行，可以直接观察到结果~