js 中的防抖和节流函数
函数节流
节流其实就是说类似于同一个事件在被多次连续触发时，如果上一次的没有完成，就禁止当前的跑进去，挡在门外
函数防抖
防抖其实是说，每一次进去的时候，都重置状态，相当于把上一次的取消
看到很多大佬讲的防抖和节流都比较深入，其实我觉得可以简单点，看2个函数自己感觉下？
防抖
const debounce = (fn, delay) => {
let timer;
return function(...args) {
// 如果有定时任务，直接重置
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
};
测试
const test = () => {
console.log(123123);
};
setInterval(debounce(test, 3000), 1000); // 无输出，因为1s会导致timeout被重置
setInterval(debounce(test, 3000), 4000); // 第一次等7s后输出，之后4s输出一次
其实很好理解，防抖就是说在我超时的时间内如果跑进来，就会直接重置我的超时，因此如果执行的间隔小与我超时的时间设置，就会导致永远不输出
函数节流
节流
const throttle = (fn, gapTime) => {
let timer;
return function(...args) {
// 如果有定时任务，就等待执行掉再处理
if (timer) return;
timer = setTimeout(() => {
fn.apply(this, args);
clearTimeout(timer);
timer = null;
}, gapTime);
};
};
测试
const test = () => {
console.log(123123);
};
setInterval(throttle(test, 3000), 1000); // 到第4s的时候输出，之后每3s输出一次
setInterval(throttle(test, 3000), 5000); // 到第8s的时候输出，之后每5s输出一次
节流是什么意思呢，就是说无论你外界怎么调用，必须要满足我的超时，在我超时等待的这段时间内不允许任何打断，因此当我超时是3s但是每隔1s就调用一次的时候，会被直接return，到我定时的任务执行之后，才允许下一个进来，但是如果我的时间间隔比你的执行时间要短，那么我一定会按照你的频率来执行，比如第2种情况会每隔5s输出一次
结论：
防抖就是在一定时间内触发的话直接重置我要执行的任务，从头开始。
节流就是说一定时间内，我的任务必须消化掉才能继续接收后面的，这中间的就直接丢弃了。
适用场景
防抖：
假设在某一个页面的input框上我们要做一个智能提示，就是说用户输入内容后，要去发请求获取提示的内容，当用户输入过快的时候，我们是没必要有变动就去发请求，这样对服务器的冲击太大了，这个时候可以利用防抖来做一个1s的delay，因为1s内如果用户连续输入也没必要去发请求。
ps:google并不是这么实现的，这里只是举例，google实际是如果有新的请求发出去会取消掉上次的请求~，这样会让体验更好；1s只是举例时间，具体情况具体确定。
节流：
假设有一个落地页，页面上有一个购买按钮，点这个按钮我们会发起支付请求，如果什么都不做的情况下用户会连续猛击20次的话，我们会发20个请求到后台去生成订单，这明显是不合理的，这个时候如果用节流函数来做，用户在1s内连续按多少次都没用，我们必须消化掉点击的第一次才能继续处理后面的流程。
ps：没写例子代码，后续有时间我会尽量补上地址~
