节流与防抖原理之简单实现

节流（throttle）

**定义：**指的是某个函数在一定时间间隔内（例如 3 秒）只执行一次，在这 3 秒内 无视后来产生的函数调用请求，也不会延长时间间隔

**应用场景：**scroll事件、mousemove事件、上传进度等情况

**实现方法：**定时器、时间戳

可视化对比： demo.nimius.net/debounce_th…

方法一：使用定时器

function throttle_timeout (fn, wait, immediate) {
	let flag = true;
	return function () {
		if (!flag) {
			return;
		}
		flag = false;
		setTimeout(() => {
			fn();
			flag = true;
		}, wait)
	}
}
function showTop () {
	let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　	console.log('滚动条位置：' + scrollTop);
}
 document.body.onscroll = throttle_timeout(showTop, 1000);

方法二： 使用时间戳

function throttle_times (fn, wait) {
	let previous = 0;
	return function () {
		let now = +new Date();
		if (now - previous > wait) {
			fn();
			previous = now;
		}
	}
}
function showTop () {
	let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　	console.log('滚动条位置：' + scrollTop);
}
document.body.onscroll = throttle_times(showTop, 1000);

防抖（debounce）

**定义：**指的是某个函数在某段时间内，无论触发了多少次回调，都只执行最后一次

**应用场景：**页面resize事件、input搜索输入框等

**实现方法：**定时器

可视化对比： demo.nimius.net/debounce_th…

html:
<input type="text" name="" class="search">

js:
function debounce(fn, wait = 50) {
	let timer = null;
	return function () {
		if (timer) {
			clearTimeout(timer)
		}
		timer = setTimeout(() => {
			fn();
		}, wait)
	}
}
let search = document.querySelector('.search');
function showValue () {
	console.log(search, search.value)
}
search.oninput = debounce(showValue, 1000)

上面节流防抖只是简单的介绍了其定义和实现原理，还存在很多问题，比如参数传参、立即执行、延迟执行等问题还需要处理