JavaScript函数节流与函数去抖
背景
最近在做项目的时候，由于对按钮的连续点击事件没有做处理，导致button连续双击或者多击的时候，会dubmit多次，导致画面锁死或者各种奇怪的现象。
其实我们的本意在点击多次的情况下，只触发一次事件，类似的问题还有window的resize事件，resize并不是在事件结束后才出发，具体的触发频率不是很清楚，但却在不停地调用，直到窗口大小不在变化。类似的机制还有鼠标的mousemove，都是在短时间内重复触发。
函数去抖
在网上搜索之后，得到下面的解决办法
1 function throttle(method, context){ 2 clearTimeout(method.tId); 3 method.tId = setTimeout(function(){ 4 method.call(context); 5 }, 500); 6 }
根据上面的代码做了一个简单的demo
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>throttle</title> 5 <script> 6 //函数执行次数 7 var clickCount = 0; 8 9 function clickFunction(param1,param2){ 10 console.log(param1+" "+param2); 11 clickCount++; 12 console.log(clickCount); 13 } 14 15 function throttle(method, context,param1,param2){ 16 clearTimeout(method.tId); 17 method.tId = setTimeout(function(){ 18 method.call(context,param1,param2); 19 }, 500); 20 } 21 22 function test(){ 23 throttle(clickFunction, window,"param1","param2"); 24 } 25 </script> 26 </head> 27 <body> 28 <input type="button" onclick="test()" value="500ms内连续点击任意次数"/> 29 </body> 30 </html>
原理很简单，利用定时器，让函数执行延迟500毫秒，在500毫秒内如果有函数又被调用则删除上一次的调用，这次调用500毫秒后执行，这样的话执行就没有问题了。
