优化页面请求性能——防抖

防抖：
就是在函数需要频繁触发时，只有经过足够的时间后，才执行一次。
好像公交司机会等人都上车后才出站一样。

应用场景：
1.实时搜索
2.拖拽

以实时搜索为例子：
以百度的实时搜索，我输入NBA的过程中，如果不做防抖处理的话，就会每次输入一个数据，就会发送一个网络请求个服务器，请求相关关键字的数据，在把页面渲染出来。但是，我们的本质是想要搜索NBA，在输入NBA的过程中，一定会触发3次input事件，但是针对发送请求来讲，前面两次发送数据请求是没有必要的。我们可以直接等最后一次输入完A后，在发送数据请求。那么，这个时候，我们就要在代码中做出相应的处理

代码封装：
关键点：倒计时器，闭包，this指向，不定参数

	function debounce(fn, delay) {
		var timer = null;
		return function() {
			clearTimeout(timer);
			var self = this;
			var args = arguments;
			timer = setTimeout(function() {
				fn.apply(self, args);
			}, delay)
		}
	}

案例：
（需要你自己把下面代码放在html文件，js文件中，代码只是最核心代码）

html代码：
<input type="text" id="inp">

	// 没有防抖处理的代码
	var oInp = document.getElementById('inp');

	function ajax () {
		console.log(this.value);
	}

	oInp.oninput = ajax;

	// 防抖处理代码
	var oInp = document.getElementById('inp');
	var timer = null;

	function ajax (e) {
		console.log(e, this.value);
	}

	oInp.oninput = function(e) {
		var args = arguments;
		var self = this;
		clearTimeout(timer);
		// this执行，事件源对象e的问题
		timer = setTimeout(function() {
			ajax.apply(self, args);
		}, 1000);
	}

希望通过这篇文章，你对防抖有一个清楚的了解，防抖是一种性能优化的技巧，对你以后页面优化大有好处。

如果你对防抖也不太了解，可以看我的另外一篇文章：

优化网络请求性能——节流

如果文章内容有错误的地方，请及时指出，谢谢大家，我们一起成长。