前言：

　　　　防抖和节流在js中有很多应用的场景，比如监听滚动条事件，输入字符搜索次数的优化等等。不能只知其然而不知其所以然，所以有必要了解下实现的原理。

区别：

　　　　防抖是在一段时间内不能执行某种操作。比如在搜索框这个场景，只有在500ms后没有输入新的字符，才会去调用接口进行搜索。

　　　　节流则是有规律的执行某种操作。比如监听滚动条事件这个场景，在一直滚动时，每隔300ms会执行一次滚动条事件的回调。

防抖：

/**
 * 函数防抖
 * @param func 目标函数
 * @param delay 延迟时间
 * @param immediate 是否立即执行，是指在触发后是否先执行一遍目标函数
 */
function debounce (func, delay, immediate) {
	let timer = null; // 通过闭包来保存timer的值
	let _debounce = function () {
		const context = this;
		const args = arguments;
		if (timer) {
			clearTimeout(timer);
		}
		if (immediate) {
			let callNow = !timer; // 如果timer为null说明是第一次执行
			timer = setTimeout(() => {
				timer = null;
			}, delay);
			if (callNow) {
				func.apply(context, args);
			}
		} else {
			timer = setTimeout(() => {
				func.apply(context, args);
			}, delay);
		}
	}
	_debounce.cancel = function () {
		clearTimeout(timer);
		timer = null;
	}
	return _debounce;
}

　　

节流：

/**
 * 函数节流
 * @param func 目标函数
 * @param delay 延迟时间
 * @param options options.leading：是否在刚触发后立即执行目标函数
 *                options.trailing：是否在停止触发后还执行一次目标函数
 */
function throttle (func, delay, options) {
	let timer;
	let previous = 0; // 上一次执行的时间点
	options = options || {};
	
	const _throttle = function () {
		const context = this;
		const args = arguments;
        const now = +new Date();
        // 如果leading为false，则设置上一次执行的时间点为当前，自然也就不会立马执行目标函数了
		if (!previous && options.leading === false) {
			previous = now;
        }
        // 计算距离上次执行的时间点还剩多少时间
        const remaining = delay - (now - previous);
        // 如果剩余时间小于等于0，说明从上次执行到当前已经超过了设定的delay间隔
        // 如果剩余时间大于设定的delay，说明当前系统时间被修改过
		if (remaining <= 0 || remaining > delay) {
			if (timer) {
				clearTimeout(timer);
				timer = null;
			}
			func.apply(context, args);
			previous = now;
		} else if (!timer && options.trailing === true) {
			timer = setTimeout(() => {
                // 如果leading为false代表下次触发后不需要立马执行目标函数，所以设置为0，在17行才会顺利进入判断
				previous = options.leading === false ? 0 : +new Date();
				func.apply(context, args);
				timer = null;
			}, remaining); // 此处设定为计算距离上次执行的时间点剩余的时间，使用setTimeout保证了即使后续不触发也能再执行一次目标函数
		}
	}
	
	_throttle.cancel = function () {
		clearTimeout(timer);
		timer = null;
		previous = 0;
	}
}