JS 函数节流和函数防抖

函数节流

初识概念：

生活中有很多这样的例子，小学的时候课本里讲要节约用水随时关水龙头，灯不要一直开着出门或者睡觉及时关灯，这里提取一个思想：长时间使一个事物处于活动状态不好！

结合实践：

如果你是一个工作过一段时间的前端开发人员肯定遇到过这样的一些例子：有一个用来提交表单的按钮，用户点击的时候可能会害怕没点上而多点几下，会产生短时间频繁提交的问题，很有可能提示提交失败原因就是第一次已经成功了，后面的都会报错，解决的办法也很多比如点击一次后禁用点击按钮，比如用遮罩层防止二次点击，还有就是用今天的函数节流的方法，抑制提交函数的频繁执行，但又不能不执行，最好是等到有返回结果之后再执行。

简单实现：

var active = true;

function commit(){

    if(acitve){

        active = false；

        //这是一个提交请求，请求结束会改变active的值为true；

   }

}

函数防抖

初识概念：

同函数节流的思想一样，函数防抖也是为了避免使一个事物长时间处于活动状态。

结合实践：

考虑这样一个需求，在滚动条滚动过程中执行一些操作，在控制台可以轻而易举的发现在滚动过程中有很多打印，我还曾经天真的认为可能每秒执行的次数是个固定值，最后发现天真的可爱，这个数值是不稳定的，有一个不大的波动范围，如果执行的操作足够复杂可想而知此时的浏览器已经油尽灯枯了，然而其实我们并非在意滚动的过程，我们想要的可能只是结束时候的那个状态执行了就行了，另一个情况是搜索框内输入字符时的模糊查询，如果打字比较快的话，查询操作显然不可能马上返回，那么在输入的这个过程会产生数据不断刷新的情况，但是这样的效果并不好用户也并不在意这个输入过程，可能只在乎输入完成的那个结果，也就是我说的防止这个过程的抖动。

简单实现：

var timer = null;

function query(){

    clearTimeout(timer);

    timer = setTimeout(function(){

        //这是一个查询或其他耗时操作

    },500) }

}

总结

函数防抖和节流的目的都是减少某个操作的执行频率或次数，防抖偏向于不在意过程更注重结束的时候能执行就可以了，节流更偏向过程必须执行但是可以减低频率在一个合理的范围内，物极必反，事半未必不能功倍！