防抖节流函数

节流

原理：

避免处理函数被频繁触发，让函数每隔一段时间执行一次。党在执行周期内被触发时，不允许被执行，所以直接为函数的执行添加时间间隔就OK了。

实现：

function throttle(fn, mustRun = 500) {
	let previous = null;
	return function(...args){
		let context = this;
		let now = new Date();
		if (!previous) {
			previous = now;
		}
		let sub = now - previous;
		if (mustRun && sub >= mustRun) {
			fn.call(context, args);
			previous = now;
		}
	}
}

应用场景：

图片懒加载： 当在一个页面有很多的图片时，为了减轻服务器负担，同时能在页面迅速渲染出图片，我们选择只加载窗口可视区的图片，这时通过为滚动事件的处理函数添加节流操作即可。

防抖

原理：

当DOM事件被频繁触发时，在延期周期内，只在最后一次被触发时执行处理函数，在此之前的触发都不进行处理。通过定时器在延时周期内，清除之前的
DOM操作触发的处理函数，只执行最后一次的处理函数。

实现：

function debounce(fn, delay = 500) {
	let timer = null;
	return function (...args) {
		let context = this;
		clearTimeout(timer);
		timer = setTimer(function() {
			fn.call(context, args);
		}, delay)
	}
}

应用场景：

输入框及时查询：当输入框输入查询条件变化时，希望能够及时根据条件向后台获取查询结果。假设，一秒钟输入了十个字符就会触发十次的查询。此时，可以使用函数防抖只在最后一次输入后的N秒后执行。