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>

巴特西

javaScript节流与防抖

最新文章

热门文章