防抖(debounce)和节流(throttle)
应用场景--移动--搜索框--窗口缩放--滚动事件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Throttle</title> 7 <style> 8 .box{width: 100%; height: 200px; background-color: #333;color: #fff; line-height: 200px; text-align: center; } 9 .pox{width: 100%; height: 200px; background-color: #222;color: #fff; line-height: 200px; text-align: center; } 10 </style> 11 </head> 12 <body> 13 <div class="box"> </div> 14 15 <div class="pox"></div> 16 17 <script> 18 var $box = document.querySelector('.box'); 19 var count= 0; 20 $box.addEventListener('mousemove', debounce(handleMouse,2000),false) 21 22 function handleMouse(e){ 23 console.log('eventObiect',e); 24 console.log('thisDom',this); 25 console.log('count ： ',count++); 26 $box.innerHTML = count; 27 } 28 29 // 防抖函数 -- 非立即执行版 -- 事件触发后不会立即执行，而是在n秒后才会执行 30 function debounce (fn,time){ 31 let timer; 32 return function(e){ 33 let context = this; 34 let args = arguments; 35 if(timer)clearTimeout(timer); 36 timer = setTimeout(function(){ 37 fn.apply(context,args) 38 },time); 39 } 40 } 41 42 // 立即执行版 -- 触发事件后函数会立即执行，然后n秒内不继续触发事件并执行函数。 43 function debounceL(fn,wait_time){ 44 let timer; 45 return function(){ 46 let context = this; 47 let args = arguments; 48 if(timer){ 49 clearTimeout(timer) 50 }; 51 let allowNow =!timer; 52 timer = setTimeout(function(){ 53 timer=null; 54 },wait_time); 55 if(allowNow){fn.apply(context,args)} 56 } 57 } 58 59 60 let $pox = document.querySelector('.pox'); 61 let num = 100; 62 $pox.addEventListener('mousemove',throttle(handleMouseB,1000),false); 63 function handleMouseB(){ 64 num++; 65 $pox.innerHTML = num 66 } 67 // throttle 节流函数 -- 延时器 就是指连续触发事件但是在 n 秒中只执行一次函数。 节流会稀释函数的执行频率 68 function throttle(fn,delay){ 69 let timer; 70 return function(){ 71 let context = this; 72 let args = arguments; 73 if(!timer){ 74 timer=setTimeout(function(){ 75 timer = null; 76 fn.apply(context,args) 77 },delay) 78 }; 79 } 80 } 81 82 // 节流 -- 时间戳 83 function throttletemp(func, wait) { 84 var previous = 0; 85 return function() { 86 let now = Date.now(); 87 let context = this; 88 let args = arguments; 89 if (now - previous > wait) { 90 func.apply(context, args); 91 previous = now; 92 } 93 } 94 } 95 96 97 98 </script> 99 </body> 100 </html>
