我们一起，每天进步一点。日积月累，有朝一日定会，厚积薄发。
（三）不可不说的JS重点知识~递归和尾递归（测试小姐姐专题）
（五）javaScript重点知识~~~单例模式（测试小姐姐专题）
今天又是及其平常的一天，中午吃完饭在工位小憩，顺便幻想一下彩票中奖1000万后的人生规划。忽然闻到一股芬芳的气味。这不是别人 ，正是我们的测试小美女。我睁开朦胧的双眼，感觉芬芳的味道之中带有一股杀气，果然不出所料。她直奔我而来，不由分说把我拍醒。“醒醒啊，刚做的实时搜索功能偶尔会出现卡顿！！”她指责说道。但是我看她娇滴滴的小表情，还是违心的原谅了她。造孽啊！！！！！
多年的职业素养，让我直奔主题。打开chrome调试工具，来调试一下这个莫名其妙的bug。果然如此，在搜索栏输入内容的时候，每输入一个字母都会请求一次，network中打印了好多网络请求。这种高频的请求是造成卡顿的主要原因，毕竟浏览器的性能是有限的，容不得我们这样放肆。让我们一起讨论如何优化这种场景，来化解测试小姐姐的杀气。
单刀直入，现在的目标 就要减少请求的数量,节省流量。来吧，造作吧。拿出我的杀手锏~~防抖(debounce)和节流(throttle)。
一、首先让我们先认识一下他们：
1.防抖(debounce)：对于短时间内连续触发的事件（上面的场景：连续请求同一个接口），防抖的含义就是让某个时间期限内（约定200毫秒），事情处理函数只执行一次。举个栗子：我连续输入100个字母，在输入最后一个字母后，再等200毫秒，执行请求接口。
2.节流(throttle)：对于短时间内连续触发的事件（上面的场景：连续请求同一个接口），节流的含义就是在某个时间期限内每隔（预定300毫秒）执行一次。举个例子：我连续输入100个字母，在输入过程中，每隔300毫秒就请求一次接口。也就是说等输入完100个字母，会请求很多次接口。
二、解决方案：
1.针对上述场景，我们先采用防抖 函数。
function debounce(fn, delay = 200) {
if (typeof fn !== 'function') { // 参数类型为函数
throw new TypeError('fn is not a function');
}
let lastFun = null;
return function(...args) {
if (lastFun) {
clearTimeout(lastFun);
}
lastFun = setTimeout(fn, delay);
}
}
在使用防抖函数之后，发现在停止输入200毫秒之后，才会触发请求。貌似是解决了卡顿和浪费资源的问题。
2.采用节流 函数
经过深思熟虑之后，咱们搜索框的input事件，是需要支持实时搜索的。因此防抖的函数这个解决方案还是差那么一点点点意思。让我们使用节流来试验一下吧。
function throttle(fn,delay){
let jieke = true;
return function(){
if(!jieke){
return false;
}
jieke = false;
setTimeOut(()=>{
fn();
jieke = true;
},delay);
}
}
throttle(()=>{console.log('我爱你，测试小姐姐')},300);
经过测试，节流函数比较符合我们的实现场景。
看到这个测试结果。测试小姐姐，表现出了前所未有的惊讶，脸上也透出了微微红润。这时她附耳说道：“下班后，在楼下咖啡厅等我。”
未完待续........
各位看官，知道为什么测试 小姐姐，突然面带桃花，粉里透红了吗？是咱方案出的漂亮，还是因为.......欢迎留言,多多指导批评。
沁园春·雪
北国风光，千里冰封，万里雪飘。
望长城内外，惟余莽莽；大河上下，顿失滔滔。
山舞银蛇，原驰蜡象，欲与天公试比高。
须晴日，看红装素裹，分外妖娆。
江山如此多娇，引无数英雄竞折腰。
惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。
一代天骄，成吉思汗，只识弯弓射大雕。
俱往矣，数风流人物，还看今朝。
