1.直接上码

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>debounce-throttle</title>

     <script type="text/javascript">

         //节流函数：时间戳节流，规定时间内一定执行一次

         function throttle(fn, delay){

             var prev = Date.now();

             return () => {

                 var context = this,args = arguments;

                 var now = Date.now();

                 if(now - prev >= delay){

                     fn.apply(context, args);

                     prev = Date.now();

                 }

             };

         }

         //节流函数：定时器节流，规定时间内一定执行一次

         function _throttle(fn, delay){

             var timer;

             return () => {

                 var context = this,args = arguments;

                 if(!timer){

                     timer = setTimeout(function(){

                         fn.apply(context, args);

                         timer=null;

                     },delay);

                 }

             };

         }

         //事件触发时立即执行，触发完毕还能执行一次的节流函数：

         function __throttle(fn, delay){

             var timer,prev = Date.now();

             return () => {

                 var context = this,args = arguments;

                 var now = Date.now();

                 clearTimeout(timer);

                 if(delay - (now - prev) <= 0){

                     fn.apply(context, args);

                     prev = Date.now();

                 }else{

                     timer = setTimeout(function(){

                         fn.apply(context, args);

                     },delay);

                 }

             };

         }

         //防抖函数：规定一定时间后只执行一次fn

         function debounce(fn, delay){

             var timer;

             return () => {

                 var context = this,args = arguments;

                 clearTimeout(timer);

                 timer = setTimeout(function(){

                     fn.apply(context, args);

                 },delay);

             };

         }

         //防抖函数：立即执行然后一定时间后只执行一次fn

         function _debounce(fn, delay, flag){

             var timer;

             return () => {

                 var context = this,args = arguments;

                 clearTimeout(timer);

                 if(flag){

                     var now = !timer;

                     timer = setTimeout(function(){

                         timer = null;

                     },delay);

                     if(now){

                         fn.apply(context, args);

                     }

                 }else{

                     timer = setTimeout(function(){

                         fn.apply(context, args);

                     },delay);

                 }

             };

         }

         function printLog(){

             var date = new Date();

             var second = date.getSeconds(),milliseconds=date.getMilliseconds();

             console.log('printLog:'+second+' ' +milliseconds);

         }

         window.onload = function(){

             document.getElementById('div').addEventListener('click', throttle(printLog,1000));

         }

     </script>

 </head>

 <body>

     <div id="div" style="width:200px;height:160px;background-color: yellow;"></div>

 </body>

 </html>

2.总结

防止一个事件频繁触发回调函数的方式：
防抖动：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。
节流：使得一定时间内只触发一次函数。
它和防抖动最大的区别就是，节流函数不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而防抖动只是在最后一次事件后才触发一次函数。
原理是通过判断是否到达一定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。

3.参考资料

https://blog.csdn.net/crystal6918/article/details/62236730

http://www.ptbird.cn/javascript-anti-shake-throttle.html

巴特西

JavaScript防抖节流函数

1.直接上码

2.总结

3.参考资料

最新文章

热门文章