前端js基础防抖函数，节流函数应用意义，场景

函数防抖

概念
**函数防抖
当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间 **

export function debounce(func,wait=500){
let timeOut=null;   （用来处理事件的定时器）
return function(event){
 clearTimeout(timeout);   //每次触发前先清除上一次的定时器，重新开始计算
 event.persist&&event.persist()  //保留事件引用
 timeOut=setTimeout(()=>{
  func(event)
},wait)   //指定xxMS后触发真正想要执行的操作func
}
}

代码出来了 我们来具体分析一下业务场景；
假设我们在做用户登录或者验证用户名的操作；
首先：这种业务无非两种方式，一种是用户即时输入的时候就验证，一种是用户光标移开后验证；如果选择的是blur那么这个事件的处理将会是用户光标移开后才去发送请求验证事件；
举个例子：（老司机请忽略此处）
假设你写东西，写错了可以用橡皮擦直接擦掉；这就是即时的改变！
但是如果是blur呢？或者其他事件而非change事件呢！他们一般需要额外执行一个操作就是动作事件；当只有捕捉到了用户的额外动作后才会执行；所以理论上他们避免了用户在实时操作上对验证函数的重复和不间断调用；
所以类似的这种防抖函数多数会使用在我们的用户验证和注册中；

函数节流

预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期
函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

export function throttle(func,interval=100){
let timeOut=null;
let startTime=new Date();
return function(event){
 event.persist&&event.persist()  //保留事件引用
 clearTimeout(timeOut)
 let curTime=new Date();
 if(curTime-startTime<interval){
    timeOut=setTimeout(()=>{
      func(event)
    },interval)
 }else{
  //重新计时并执行函数
  startTime=curTime;
  func(event)
 }
}

}

**区别举个列子 **
函数防抖：比如我们坐公交（触发事件），等我上了公交将在10秒钟后出发（执行事件监听器），这时如果又有人要上公交了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）。
函数节流 ：保证如果我们一起上到公交上之后后，10秒后准时出发，这个时间从我们上到车里的时间开始计算，不等待，如果没有人，则不运行
这种情况在我们日常开发中很常见，但很多时候我们选择忽略，（A：不就意外多发了两次请求没事，抗的住；B：没事，只要我能拿到最后准确的返回值就行诸如此类）；
其实对于一般情况这么理解是没问题的；但是我们身为开发就要严禁，因为你无法保证你的用户会干什么，你只能在最开始的时候就做最坏的假设操作；这样即使上线了心里也有底