javaScript节流与防抖

Posted 2022-10-23 zheoneandonly

一、节流（throttle）

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

实现原理图：

 代码实现：

 1 //节流函数
 2 function throttle(handler,wait)
 3     var lastDate = 0;
 4     return function()
 5         var newDate = new Date().getTime();
 6         if(newDate - lastDate > wait)
 7             handler.apply(this,arguments);
 8         
 9         lastDate = newDate;
10     
11 

节流函数测试：

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

二、防抖

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

代码实现：

 1 //防抖函数
 2 function antishake(handler,interval)
 3     var lastDate = 0;
 4     var time ;
 5     return function()
 6         var self = this;
 7         var args = arguments;
 8         clearTimeout(time);
 9         time = setTimeout(function()
10             handler.apply(self,args);
11         ,interval);
12     
13 

防抖函数测试：

 1 <div id="nub">0</div>
 2 <button id="but">点我</button>
 3 <script>
 4     var odiv = document.getElementById("nub");
 5     var oBut = document.getElementById("but");
 6         oBut.onclick = antishake(fun,1000);//一秒以内的连续点击只会触发一次
 7     var num = 0;
 8     function fun()
 9         odiv.innerText =  ++num;
10             
11 </script>