函数防抖和节流（面试题）

概念：

防抖节流分为防抖和节流，都是为了防止短时间内高频繁调用同一接口的方法。比如，短时间内重复点击提交同一个评论，异步操纵还未给出响应，多次调用接口，导致重复提交多个评论。那么，防抖和节流两种方法可解决这一短时间高频繁调用接口的问题

防抖：

核心：设置延时器，短时间高频率触发只有最后一次触发成功
解释：比如点击提交后，设置一个定时器，间隔1s再发送请求，如果 1s内多次请求，则清除定时器，1s后重新发送请求。也就是说，在1s内无论点击提交多少次，最后一次总是会清除上一次的延迟，继而进行自身请求。
无论你如何乱点，也只有你停止点击的最后一次会请求成功。
缺点：响应时间太久。

举例：
//函数的防抖：设置延时器，短时间高频率触发只有最后一次触发成功
   var timer=null
    btn.onclick=function(){
       clearTimeout(timer)
       timer=setTimeout(function(){
          console.log('点击了');
      },1000)
    }

节流：

核心：设置状态锁，短时间高频率触发只有第一次触发成功
解释：节流就是设置状态锁，比如设置一个key作为状态锁，锁一开始是关闭的，即key值设置为false。当你点击时，会对key进行判断，如果key为false，未上锁，那么开始发起请求，并且给key上锁，即设置key为true。如果你继续点击，则对key进行判断，发现key上锁了，则不发起请求，点击无效。当请求完成后，key设置为false，则可以发送新一轮请求了。

举例：
// 节流：设置状态锁，短时间高频率触发只有第一次触发成功
var key = false
btn.onclick=function(){
  if(!key){
    console.log('请求');
    key=true
    setTimeout(function(){
      key=false
    },5000)
  }
}

防抖和节流区别：

函数节流不管事件触发有多频繁，都会保证在规定时间内一定会真正执行一次事件处理函数，而函数防抖只是在最后一次触发后才会执行。