一、js函数节流
1.介绍：函数节流简单讲就是让一个函数无法在很短的时间间隔内连续调用，只有当上一次函数执行后过了你规定的时间间隔，才能进行下一次该函数的调用。
2.函数节流原理：用定时器，当触发一个事件时，先setTimout让这个事件延迟一会再执行，如果在这个时间间隔内又触发了事件，那我们就clear掉原来的定时器，再setTimeout一个新的定时器延迟一会执行。

大家应该听说过阿里做了一个抢购月饼的活动，一个内部的员工，使用了恶意脚本，抢了很多的月饼，最终导致被开除~ 其实对它未必是坏事，因为在他离开阿里之后，不知道有多少公司对他招手~ 注：希望这次不要给我删帖了~每次打上去很不容易的

不多说了，看一个案例把~

分析：有一家公司做一个活动，在规定时间可以抢购商品，每次点击一次，数量增加一个。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <div id="show">1</div>
 9         <button id="btn">点击抢购</button>
10     </body>
11     <script type="text/javascript">
12             var oDiv=document.getElementById("show");
13             var oBtn=document.getElementById("btn");
14             oBtn.onclick=function(){
15                 oDiv.innerText=parseInt(oDiv.innerText)+1;
16             }
17     </script>
18 </html>

这就是一个简单的点击事件，每次点击商品的数量都会增加一个,但是这样写真的好么？ 上面说过有程序猿用恶意脚本修改商品数量~  看下面代码

1.这是正常点击的情况~

2.一但使用了恶意脚本，就会直接对商品数量直接修改~

一但使用了这种恶意脚本，商品数量就会强制被修改。那么该如何防治这种事件发生呢？这时候就要用到节流的思想，在规定时间内，函数只能执行一次~代码如下

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <div id="show">1</div>
 9         <button id="btn">点击抢购</button>
10     </body>
11     <script type="text/javascript">
12         var oDiv = document.getElementById("show");
13         var oBtn = document.getElementById("btn");
14         function throttle(handler, wait) {
15             var lastTime = 0;
16             return function(e) {
17                 var nowTime = new Date().getTime();
18                 if(nowTime - lastTime > wait) {
19                     handler.apply(this, arguments);
20                     lastTime = nowTime;
21                 }
22             }
23         }
24         function buy(e) {
25             oDiv.innerText = parseInt(oDiv.innerText) + 1;
26         }
27         oBtn.onclick = throttle(buy, 100);
28     </script>
29 </html>

如下图：

这样修改过后就可以防止商品数量被修改了~

版权声明：本文为alongup原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/alongup/p/8719484.html