节流函数的实现，一次面试题遇到的编程题

在日常开发中有很多场景我们都需要用到节流函数和防抖函数，比如：实现输入框的模糊查询因为需要轮询ajax，影响浏览器性能，所以需要用到节流函数；实现手机号、姓名之类的的验证，往往我们只需要验证一次，这个时候我们就需要用到防抖函数；防抖函数的实现

节流函数

顾名思义，就是节省流量节省内存性能的一种函数，可以理解为是一种性能优化方案；

举个例子：一个水龙头一直在滴水，可能一次性会滴很多水，但是我们想控制它的频率 ，让它每1000毫秒滴一滴水，这个时候我们就可以用到节流函数来进行控制（简单可以理解为类似于周期性定时器）

  

   

    

     

    
    

     

      //首先定义一个全局变量
     
    
   

    

     

    
    

     

      var canRun = true;
     
    
   

    

     

    
    

     

      //当浏览器窗口大小发生变化也就是重新计算窗口大小的时候触发
     
    
   

    

     

    
    

     

      window.onresize = function(){
     
    
   

    

     

    
    

     

      // 取反，canRun为false的情况下
     
    
   

    

     

    
    

     

      if(!canRun){
     
    
   

    

     

    
    

     

      //直接return，后面的代码不执行
     
    
   

    

     

    
    

     
  return
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      //走到这来就是canRun为true的情况，然后进行赋值为false
     
    
   

    

     

    
    

     

      canRun = false
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      //设置一个定时器进行轮询操作
     
    
   

    

     

    
    

     

      setTimeout( function () {
     
    
   

    

     

    
    

     

      //这是要做的事情
     
    
   

    

     

    
    

     
 console.log("函数节流")
     
    
   

    

     

    
    

     

      //最后记得重新赋值true继续让他取反
     
    
   

    

     

    
    

     

       canRun = true
     
    
   

    

     

    
    

     

      //每隔1000毫秒也就是1秒钟就执行一次
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

        }, 1000)
     
    
   

    

     

    
    

     

      }
     
    
  
 

 防抖函数和节流函数都是用来提升性能优化及用户体验的一种方案，节流函数会规律性的执行多次；

文章来源: sunmenglei.blog.csdn.net，作者：孙叫兽，版权归原作者所有，如需转载，请联系作者。

原文链接：sunmenglei.blog.csdn.net/article/details/109767811