1.直接上码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>debounce-throttle</title> 6 <script type="text/javascript"> 7 8 //节流函数：时间戳节流，规定时间内一定执行一次 9 function throttle(fn, delay){ 10 var prev = Date.now(); 11 return () => { 12 var context = this,args = arguments; 13 var now = Date.now(); 14 if(now - prev >= delay){ 15 fn.apply(context, args); 16 prev = Date.now(); 17 } 18 }; 19 } 20 //节流函数：定时器节流，规定时间内一定执行一次 21 function _throttle(fn, delay){ 22 var timer; 23 return () => { 24 var context = this,args = arguments; 25 if(!timer){ 26 timer = setTimeout(function(){ 27 fn.apply(context, args); 28 timer=null; 29 },delay); 30 } 31 }; 32 } 33 //事件触发时立即执行，触发完毕还能执行一次的节流函数： 34 function __throttle(fn, delay){ 35 var timer,prev = Date.now(); 36 return () => { 37 var context = this,args = arguments; 38 var now = Date.now(); 39 clearTimeout(timer); 40 if(delay - (now - prev) <= 0){ 41 fn.apply(context, args); 42 prev = Date.now(); 43 }else{ 44 timer = setTimeout(function(){ 45 fn.apply(context, args); 46 },delay); 47 } 48 }; 49 } 50 //防抖函数：规定一定时间后只执行一次fn 51 function debounce(fn, delay){ 52 var timer; 53 return () => { 54 var context = this,args = arguments; 55 clearTimeout(timer); 56 timer = setTimeout(function(){ 57 fn.apply(context, args); 58 },delay); 59 }; 60 } 61 //防抖函数：立即执行然后一定时间后只执行一次fn 62 function _debounce(fn, delay, flag){ 63 var timer; 64 return () => { 65 var context = this,args = arguments; 66 clearTimeout(timer); 67 if(flag){ 68 var now = !timer; 69 timer = setTimeout(function(){ 70 timer = null; 71 },delay); 72 if(now){ 73 fn.apply(context, args); 74 } 75 }else{ 76 timer = setTimeout(function(){ 77 fn.apply(context, args); 78 },delay); 79 } 80 }; 81 } 82 function printLog(){ 83 var date = new Date(); 84 var second = date.getSeconds(),milliseconds=date.getMilliseconds(); 85 console.log('printLog:'+second+' ' +milliseconds); 86 } 87 window.onload = function(){ 88 document.getElementById('div').addEventListener('click', throttle(printLog,1000)); 89 } 90 91 </script> 92 </head> 93 <body> 94 <div id="div" style="width:200px;height:160px;background-color: yellow;"></div> 95 </body> 96 </html>
2.总结
防止一个事件频繁触发回调函数的方式：
防抖动：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。
节流：使得一定时间内只触发一次函数。
它和防抖动最大的区别就是，节流函数不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而防抖动只是在最后一次事件后才触发一次函数。
原理是通过判断是否到达一定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。
3.参考资料
https://blog.csdn.net/crystal6918/article/details/62236730
http://www.ptbird.cn/javascript-anti-shake-throttle.html