函数节流和函数防抖

1、函数节流

函数节流是指一定时间内js方法只跑一次。

函数节流的要点是，声明一个变量当标志位，记录当前代码是否在执行。

举个栗子

var isOn = true;
document.getElementById("throttle").onscroll = function(){
   if(!isOn){
         return; //通过isOn的值来判断函数是否正在执行，如果正在执行，则直接return;
   }
   isOn = false;
   setTimeout(function(){
       console.log("函数节流");
       isOn = true; //通过改变isOn的值来释放关卡，允许下一个访问者进来。
   },500); //用setTimeout规定了最小的时间间隔500ms，接着再执行setTimeout方法里面的额内容。
};

• 如果空闲，则可以正常触发方法执行。
• 如果代码正在执行，则取消这次方法执行，直接return。

2、函数防抖

函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。
一般应用场景：最常见就是用户注册时候手机号码验证和邮箱验证。只有等到用户输入完毕后，前端才需要检查格式是否正确，如果不正确，再弹出提示语。

举个栗子

var timer = false;
document.getElementById("submit").onscroll = function(){
   clearTimeout(timer);  //清除未执行的代码，重置回初始化状态。
   
   timer = setTimeout(function(){ //用setTimeout来辅助实现，延迟需要跑的代码。
     console.log("函数防抖");
  },500);//如果倒计时300ms以后，还没有新的方法触发滚动事件，则执行setTimout函数中的代码。
};

• 函数防抖的实现重点就是用setTimeout函数做缓存池，而且可以轻易地清除待执行的代码。

函数的节流和函数的去抖都是通过减少实际逻辑处理过程的执行来提高事件处理函数运行性能的手段，并没有实质上减少事件的触发次数。