防抖与节流小案例

　　在上一篇文章中提到了防抖与节流函数在js中的实际应用，这个直接和用户体验以及浏览器加载，服务器负载相关，所以防抖与节流对于前端开发人员来说是必须要掌握的一种技术。下面就根据一个小案例来具体体现防抖与节流的作用。

　　首先，没有进行防抖与节流处理的鼠标移动事件：

1 var num = 1;
2         var oWrap = document.getElementById('wrap');
3         function count (){
4             oWrap.innerHTML = num++;
5         }
6         oWrap.onmousemove = count;

　　上面代码中，给div绑定了鼠标移动事件，当鼠标在盒子内频繁移动时，事件处理函数也在持续的被调用，这样会对浏览器造成不必要的负载。

防抖函数（debounce）

　　防抖函数（debounce）：指事件在触发后指定时间内只执行一次，若在指定时间内又触发了事件，则重新计算函数执行时间，防抖函数分为立即执行版和非立即执行版

非立即执行版：

 1 function debounce(fn,wait){
 2             var timeout;
 3             return function(){
 4                 var context = this;
 5                 var args = arguments;
 6                 if(timeout){
 7                     clearTimeout(timeout);
 8                 }
 9                 timeout = setTimeout(()=>{
10                     fn.apply(context,args)
11                 },wait);
12             }
13         }
14         oWrap.onmousemove = debounce(count,1000);

　　

　　上述非立即执行防抖函数结果显示为鼠标在盒子内频繁移动（此处gif看不出效果，真实在移动）时，函数不会立即执行，在1000ms过后会执行一次事件函数，当我在触发事件后在1s内再次触发事件会重新计算执行时间并在结束事件后执行函数