js笔记 demo篇 （二）原生js防抖搜索框

防抖

什么是防抖

防抖，难道代码还会抖吗？ 当然不是字面上的意思，代码又没有脑血栓。
问题：
比如有一个搜索框，我们要输入关键字搜索。要输入vue-router，然后搜索框绑定了input事件，触发后发出请求，那么会出现什么后果呢，就是每输入一个字母发送一次请求，这样就会浪费带宽，影响性能。
解决：
在input事件绑定的事件函数中，加一个定时器，如果用后在输入一段关键字后300毫秒还没有接着输入，那么发送请求，如果还继续输入则不发送。
上代码：

//html部分
<input type="text" id="search"></input>
//js部分
var oInput = document.getElementById('search');
var timer = null;
oInput.oninput = function () {
 	timer && clearTimer(timer); //注意这里是个坑，不清定时器达不到效果
	timer = setTimeout(function () {
		//...ajax 发送相应请求
	}, 300);
}

哎呦，不错哦，就这么简单，我们来封装一下：

function debounce(fun, time) {
	 var timer = null;
	 return function () {
	     var inp = this;
	     clearTimeout(timer);
	     timer = setTimeout(function () {
	         fun.call(inp);
	     }, time)
	 }
 }
 //调用方式
 // 参数fun为事件处理函数
 //time为事件延迟时长
 element.oninput = deboince(function () {
	//这里可以请求数据
 }, 300)//如果300不继续输入则发送请求

ok我们来把这么封装的小功能应用一下呗，这里写了个小demo，数据是模拟的没有和后台接通，有按钮筛选，和关键字筛选功能，防抖功能。
搜索框没有进行首字母筛选哦。

防抖搜索框demo展示地址：http://www.fgdemoshow.cn/smallDemo/js/searchBox

gitHub地址：https://github.com/lifei5859/search-box