javaScript节流与防抖

一、节流（throttle）

用来实现阻止在短时间内重复多次触发同一个函数。主要用途：防止使用脚本循环触发网络请求的函数的恶意行为，确保请求的真实性（当然也包括其他阻止高频触发行为的应用）；

实现原理图：

代码实现：

 //节流函数
 function throttle(handler,wait){
     var lastDate = 0;
     return function(){
         var newDate = new Date().getTime();
         if(newDate - lastDate > wait){
             handler.apply(this,arguments);
         }
         lastDate = newDate;
     }
 }

节流函数测试：

 function foo(nub){
     console.log(nub);
 }
 var han = throttle(foo,1000); //设置节流时间为1000毫秒
 for(var i = 0; i < 100; i++){
     han("1");//使用for调用执行节流函数han只能第一次被触发，因为程序的执行速度是微秒级的速度
 }

二、防抖

用来实现高频触发函数调用时，实际只调用最后一次函数执行。主要用途：用于可能出现高频触发DOM结构或样式修改，导致的页面高频重排重绘，严重影响页面性能，同时也导致操作的DOM闪烁抖动的情况，造成体验效果差。（也包括其他阻止高频触发的用途）

代码实现：

 //防抖函数
 function antishake(handler,interval){
     var lastDate = 0;
     var time ;
     return function(){
         var self = this;
         var args = arguments;
         clearTimeout(time);
         time = setTimeout(function(){
             handler.apply(self,args);
         },interval);
     }
 }

防抖函数测试：

 <div id="nub">0</div>
 <button id="but">点我</button>
 <script>
     var odiv = document.getElementById("nub");
     var oBut = document.getElementById("but");
         oBut.onclick = antishake(fun,1000);//一秒以内的连续点击只会触发一次
     var num = 0;
     function fun(){
         odiv.innerText =  ++num;
     }
 </script>