浅谈函数防抖与函数节流

一、概念

函数节流是指一定时间内，js方法只跑一次，比如人眨眼睛，是隔一段时间眨一下，很形象的解释了函数节流这一概念。

函数防抖是指频繁触发某一条件的情况下，每次触发，需要过一段时间，然后才能执行一次代码。

二、函数节流

函数节流应用的实际场景，多数在监听页面元素滚动事件与监听鼠标移动事件的时候会用到。因为滚动事件和鼠标移动事件，都是高频触发的事件。以下是封装的函数节流的函数示例：

function throttle(func,delay){
   var timer = null;
   return function(...argus){
     if(!timer){
       timer = setTimeout(()=>{
          func.apply(this,argus);
          timer = null;
       },delay)
     }
   }
 }

函数节流的要点就是声明一个状态标记变量，来实现代码是不是可以执行。

定义的timer在延时器执行过后，被赋予一个值，所以需要在延时器执行完毕，给它赋回null。

三、函数防抖

函数防抖的应用场景，最常见的就是用户注册时候的手机号码验证和邮箱验证了。只有等用户输入完毕后，前端才需要检查格式是否正确，如果不正确，再弹出提示语。下面是函数防抖的封装代码示例：

function antiShake(func,delay){
    var timer = null;
    return function(...argus){
      clearTimeout(timer);  
      timer =setTimeout(()=>{
        func.apply(this,argus);
      },delay);
    }
  }

 

函数防抖也是通过一个延时器来进行开启，不过需要注意的是，在每次开启代码时，需要对延时器进行清除处理。