防抖和节流都是为了防止函数被多次调用。
在实际业务中非常有用！
1.可以减少服务端压力。
2.防止用户获取冗余信息，如：接受到多次请求返回的结果。
3.提高业务稳定性，如：表单的提交。
...
总之就是替用户的手贱买单【狗头】。
一，防抖
正如其字面意义，用户不小心手抖了多点了几次，我们的目标就是让这几次重复的调用只有一次生效。显然我们不知到用户到底会手抖触发多少下，那就让最后一次生效吧。
思路：时间间隔内该函数若是重复触发，便去销毁上次任务。
/**
* @description: 对目标函数进行防抖封装
* @param fn 目标函数
* @param timeOut 时间间隔
* @return 防抖函数
*/
function debounce(fn, timeOut=500){
let timer = null
return ()=>{
//销毁前一次定时器任务
clearTimeout(timer)
//记录定时器任务的id
timer = setTimeout(() => {
fn()
}, timeOut);
}
}原理：setTimeout 会将回调函数在给定的时间后推入消息队列，同时他会立即返回一个ID，通过这个ID我们便可以对其进行销毁。
拓展：有时候网卡，用户不耐烦就不停的点，但是我们一次都没有为用户实际去调后台，常见的办法是用户点n次后我们跳出一个弹窗去提示"请勿重复点击"，或者点击n次后我们额外调一次。
二，节流
防抖是：间隔小于n秒的连续调用全部失败；相对的节流是：间隔小于n秒的连续调用能成功，但只能成功一次
思路：调用一次后让目标函数休眠一段时间，定时再去唤醒目标函数。
/**
* @description: 对目标函数进行节流封装
* @param fn 目标函数
* @param timeOut 时间间隔
* @return 节流函数
*/
function throttle(fn, interval=1000){
//记录上次调用的时间戳
let lastcall = 0;
return () => {
//该次调用的时间戳
let now = new Date().getTime()
//间隔大于给定值才能调用成功
if(now - lastcall > interval){
lastcall = new Date().getTime()
fn()
}
}
}
原理：通过对比上次调用和该次调用的时间戳差值，得知我们是否有权限调用目标函数。
拓展：同样也可以通过定时器去实现。相对与防抖，节流的业务常见便少了些，游戏中倒是常见如技能冷却，子弹射速等等。
上述的防抖、节流都是通过闭包实现的，虽然能实现功能，但还存在很多问题，如被封装函数的this指向问题。笔者呢只是个小白，大家可以再多多参考些其他文章，或者看看工具库的源码如lodash，也欢迎大家分享，谢谢。
