JS高频功能优化之函数节流和函数防抖

一.基本概念

什么是高频功能？

“高频”望文取义就是“很快的”；在JavaScript中，可以理解为对一个函数/事件触发次数很多的，很快的；典型的例子就是JS中鼠标滑轮事件，鼠标移动事件的触发和输入框联想查询功能实现等；

JS中为什么要减少高频的发生呢？

一句话总结：“减少高频，节约资源，防止体验差”；

节约开销：输入框的联想搜索功能，百度搜索就有联想搜索功能；联想搜索功能的实现，是通过监听用户输入去想后台请求相应的列表，并加以展示出来；代码如下：

    var seardom=document.getElementById("search");
    var sear_list=[]; //定义联想搜索列表
    seardom.addEventListener("keyup",function(){                              //keyup事件在键盘按键释放时触发
        //由于ajax是异步的，并具有一定的延时性，所以通过setTimeout表示数据请求
        setTimeout(function(res){//res表示后台返回的数据
            sear_list=res.datas; //后台返回的联想搜索列表
        },2000);
    });

上述代码是个Demo，通过以上代码可知，每次键盘按键释放时就会触发请求，这就是个“高频”的动作；会造成没必要的HTTP请求资源浪费；

防止体验差：拖拽功能实现，现在有很多网页都拥有拖拽功能；比如网页版的照片查看器，就去要对图片进行拖拽查看；如果没做优化处理，那么拖拽过程中会出现卡顿，不灵活等体验性差的问题；

二.怎样用JS解决高频问题呢？

如果不通过第三方框架处理高频问题，如RXJS异步框架；只用JS来处理高频，那么就需要函数节流和函数防抖这两种方案；

1.什么是函数节流？

函数节流就是在一定时间内只能执行做一件事情（这里的事情指的是重复的事情）；例如：吃饭，饭要一口一口吃，等一口咽下去了就吃下一口，如果一口没咽下去就急忙吃下一口，就容易咽住；在实现某些功能的时候，程序也是如此；如上诉所说的图片拖拽功能；
实现要点：通过定义一个标识来记录某函数是否在执行，如果在执行，就return false；如果没有执行，就执行该方法；代码如下：

   var dom=document.getElementById("dom"); //需要拖拽的dom
   var isBool=false; //定义是否执行的标识
   dom.addEventListener("mousemove",function(){ //监听鼠标移动件
       if(isBool){//true在执行，false没有执行
           return false;
       }
       isBool=true;
       setTimeout(function(){//设置定时函数setTimeout，每60ms执行一次
           isBool=false;
           //dosomething......
      },60);
   });

2.什么是函数防抖？

函数防抖就是在一定时间内要连续不断的做一件事，前提是清除前面正在做的事情（这里的事情是指重复的事情）；例如：吃饭，正常人吃饭的程序是在一定时间内，一口咽下去再吃下一口（函数节流），非正常人吃饭的程序是在一定时间内当一口还没咽下去，然后来了下一口饭的时候，就将上一口饭给吐出来，一直重复此动作，一直到最后一口饭才咽下去（函数防抖）。请勿模范，后果自负；
实现要点：通过setTimeout()实现延时执行某方法，例如延时时间2s，如果2s范围内接着执行该方法，就需要用clearTimeout()方法清除上一个setTimeout的延时执行的方法；代码如下：

var seardom=document.getElementById("search");
var sear_list=[]; //定义联想搜索列表
var timeout=null;
seardom.addEventListener("keyup",function(){ //keyup事件在键盘按键释放时触发
    if(timeout != null){ //timeout!=null的时候，清除上个延时的方法
       clearTimeout(timeout);
    }
    timeout=setTimeout(function(res){//res表示后台返回的数据
        sear_list=res.datas; //后台返回的联想搜索列表
    },2000);
});

三.函数节流和函数防抖的不同性总结：

其实就是一句话“节流做事有始有终，要排队；防抖做事始乱终弃，也要排队”；但是节流和防抖有个共性，就是做的事情都是一样一样的；
“节流做事有始有终，要排队”：就是等上一件事情做完，才能做下一件事情；
“防抖做事始乱终弃，也要排队”：上一件事情还没做完，就清除上件事情做下一件事情；

JS高频功能优化之函数节流和函数防抖