javaScript 節流與防抖
阿新 • • 發佈：2019-04-23
是否 inf ctype 簡單 ava time handler 網絡請求 ext
首先 我們要知道 節流與防抖可以幹什麽。
優化網絡請求性能——節流
優化頁面請求性能——防抖
舉兩個簡單的小例子：
節流：
例如 有些購物頁面，會有一些讓你搶購的活動，到點的時候，需要你快速的點某個按鈕，來搶購，
如果沒有添加節流，那麽你的頁面，每點擊一次，網絡就會請求一次，更可惡的是，還有一些用鼠
標連點器來搶購，這時，節流就派上用場了。 我可以設置，一秒內，你只能點擊一次， 效果如下：
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 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <div id="num">0</div> 11 <button id="btn">click</button> 12 13 <script> 14 var oDiv = document.getElementById("num"); 15 var oBtn = document.getElementById("btn"); 16 17 function throttle(handler, wait){// 第一次參數為主要函數，第二個參數為毫秒 18 var lastTime= 0;//記錄過去的時間 19 return function(){ 20 var nowTime = new Date().getTime(); //獲取時間戳 21 if(nowTime - lastTime > wait){ 22 //用時間戳記錄當前時間，當前時間 減去 上一次的時間，如果大於 wait(你設置的 1000毫秒) 說明 過去1000毫秒了， 23 //用戶可以點擊第二次了。 24 handler.apply(this, arguments)//執行 主要函數， 但是此時的 handler函數的this指向window，也 25 //沒有事件源對象， apply改變this 指向oBtn，傳入 事件源 arguments[0] (e) 26 lastTime = nowTime;//主要函數執行後， 當前時間就成了過去的時間了。 27 } 28 } 29 } 30 oBtn.onclick = throttle(buy, 1000); 31 function buy(){ 32 oDiv.innerText = parseInt(oDiv.innerText) + 1; 33 //每觸發一次，內容 + 1 34 } 35 </script> 36 </body> 37 </html>
防抖：
請看上面的gif圖，有沒有發現，用戶在輸入， 還在不停輸入的時候， 事件一直觸發， 但是實際上，
並不需要它一直觸發，我們需要的是，用戶在停止輸入的時候，才觸發事件。 加入防抖，
效果圖如下：
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 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <input type="text" id="inp"> 11 <script> 12 var oInp = document.getElementById("inp"); 13 14 function debounce (handler, delay){//第一個參數，主要函數，第二個參數為毫秒 15 var timer = null; 16 return function (){ 17 var _self = this, //獲取this 18 _arg = arguments;//獲取事件源對象，(e) 19 clearTimeout(timer); 20 timer = setTimeout(function(){ 21 handler.apply(_self, _arg);//執行主要函數，此時的handler函數this指向window， 22 //用apply改變this指向和傳入事件源對象 23 },delay) 24 } 25 } 26 function ajax (e){//模擬ajax 27 console.log(this.value); 28 console.log(e); //輸出到控制臺，看看事件源對象 是否為input 29 } 30 oInp.oninput = debounce(ajax, 1000);//綁定事件 31 </script> 32 </body> 33 </html>
javaScript 節流與防抖