函数的防抖和节流

防抖和节流

防抖和节流都是为了防止在短时间内高频率调用同一接口

防抖：

设置延时器，短时间内高频率的触发 ，只执行最后一次。

思路：点击按钮后设置一个定时器，间隔2s再发送请求，如果 2s内多次请求，则清除定时器，2s后重新发送请求。也就是说，在2s内无论点击提交多少次，最后一次总是会清除上一次的延迟，继而进行自身请求。

 var btn=document.getElementById('btn')
      var timer
      btn.onclick=function(){
        clearTimeout(timer)
        //   console.log('点击了');
         timer= setTimeout(function(){
            console.log('点击了');
          },2000)
      }

节流：

设置状态锁，短时间内高频率的触发，只执行第一次。

思路：设置一个key作为状态锁，锁一开始是关闭的，即key值设置为false。当你点击时，会对key进行判断，如果key为false，未上锁，那么开始发起请求，并且给key上锁，即设置key为true。如果你继续点击，则对key进行判断，发现key上锁了，则不发起请求，点击无效。当请求完成后，key设置为false，则可以发送新一轮请求了。

  var btn=document.getElementById('btn')
    var key=false
    btn.onclick=function(){
        // console.log('点击了');
      if(!key){
        console.log('点击了');
          key=true
          //请求完成后恢复可以点击状态
          setTimeout(function(){
            key=false
          },2000)
      }
      }