深入浅出防抖和节流函数(一)
在初级和中级前端面试笔试中，函数的防抖和节流要求候选人有能力去精通或者熟悉里面的机制，不仅仅要知道基本版的防抖和节流，还要知道更完美进阶的节流防抖，比如一些lodash中的实现等等，所以这个系列也是从基础版开始，我会和大家一起补充这方面的知识
防抖
【背景故事】
某商业楼每天早上上班高峰期的电梯非常堵，通常生活来讲，一个电梯肯定是要进去很多人的直到人满为止，这对于自身和电梯都是一种节约资源的表现，不可能出现每个人一人一个电梯的情况，所以对于电梯和我们，这是一种防抖函数的表现。
电梯每当停到一个楼层，会等我们进去，人没有塞满或者没有人它才会到达指定楼层。
在web端最容易遇到的就是input搜索，用户输入一个字符，会在指定的时间中监听是否还有字符进入，如果没有，那么就执行对应的函数，这样就解决了用户频繁输入字符而前端发起请求给服务器造成压力的问题
// 防抖函数
function debounce(fn, time = 300) {
let timer = null;
return function() {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, arguments);
}, time);
};
}
基础版的代码梳理，通过这个函数将fn传递，就能实现防抖的效果，当用户输入的第一个字符，会把timer函数赋予一个延时器，这个延时器执行了对应的fn，this是为了绑定执行的this指向，arguments则是这个函数的参数类数组对象，当用户在延时还未触发的时候再次输入字符，那么clearTimeout把上一个timer清除掉了，因为闭包的作用，timer不会被销毁，这样的一个函数就表示了，只要在延时间隔中（此时timer被赋值了），如果谁再调用此函数，会把上一个timer清空掉，重新延时，依次类推...
节流
【背景故事】
在0几年的时候包括可能现在都有，很多家庭知道水管把阀门开到最小，让水一滴一滴的掉下，是不会走水表的（不计费的），所以在我很小的时候就知道这个事情，虽然现在没有了，但是还是觉得很羞愧,节流函数就是起到的作用就是，把原本频繁的调用变得有秩序有间隔；
以监听scroll滚动为例：
// 节流函数
function throttle(fn, time = 300) {
let canRun = true;
return function() {
if (!canRun) return;
canRun = false;
setTimeout(() => {
fn.apply(this, arguments);
canRun = true;
}, time);
};
}
$(window).on(
"scroll",
throttle(() => {
console.log("触发了scroll");
}, 300)
);
在这个函数中，canRun这个变量变化了3次，判断了一次如果为false就return掉
- 初始化时设置为true
- 判断canRun是否为false后设置了canRun为false
- 最终事件执行完毕之后设置canRun为true，否则就进入不了下一次的节流
其实这个函数从开始到结束的canRun形成了一次循环，这个循环唯一保证的就是只有事件结束才可以开始下一个事件
总结
节流：保证回调能在指定的时间间隔中依次有规律的执行
防抖：保证回调能在指定的时间间隔中等待是否有再次执行回调，如果没有则执行，如果有则重置继续等待；