概念
函數防抖（debounce）是指在一定時間內，在動作被連續頻繁觸發的情況下，動作只會被執行一次，也就是說當調用動作過n毫秒后，才會執行該動作，若在這n毫秒內又調用此動作則將重新計算執行時間，所以短時間內的連續動作永遠只會觸發一次，比如說用手指一直按住一個彈簧，它將不會彈起直到你松手為止。
函數節流是指一定時間內執行的操作只執行一次，也就是說即預先設定一個執行周期，當調用動作的時刻大于等于執行周期則執行該動作，然后進入下一個新周期，一個比較形象的例子是如果將水龍頭擰緊直到水是以水滴的形式流出，那你會發現每隔一段時間，就會有一滴水流出。
函數節流（throttle）與 函數防抖（debounce）都是為了限制函數的執行頻次，以優化函數觸發頻率過高導致的響應速度跟不上觸發頻率，出現延遲，假死或卡頓的現象。
下面通過示例代碼看下防抖和節流。
什么是防抖？and什么是節流？一起來開心的學習下吧。
首先什么是防抖：就是在一定的時間內事件只發生一次，比如你點擊button按鈕，1秒內任你單身30年手速點擊無數次，他也還是只觸發一次。舉個例子，當你在頁面中使用onkeyUp監聽用戶在input框中的輸入，如果用戶按住一個6不放，那監聽事件豈不是一直被觸發，這樣就浪費了一部分性能了，那么我們在一定事件內監聽，也就是說我過了一秒再來看看你輸入了多少個6，那這樣是不是輕松多了。ok，解釋清楚了那么就來看下代碼，更加清晰。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>防抖</title></head><body> <button id="debounce">防抖，防抖，防抖</button> <script> window.onload = function () { let obtn = document.getElementById('debounce'); //獲取按鈕 obtn.addEventListener('click',debounceHandle(debounce),false); //監聽綁定事件 } //防抖函數 function debounceHandle (fn) { let timer = null; return function () { clearTimeout(timer); //如果存在事件就清除定時器 timer = setTimeout(function(){ //如果不存在那么就開啟定時器 fn.call(this,arguments); },300) } } //執行函數 function debounce() { console.log('防抖，防抖，防抖'); } </script></body></html>上面函數也就是在300毫秒內，只會觸發一次事件。總結：防抖就是在任務頻繁觸發的情況下，只有任務觸發的間隔超過指定間隔的時候，任務才會執行。
接下來什么是節流，假如在一個頁面中有任意多張圖片，那么就有可能會使用懶加載技術，懶加載呢就是監聽滾動條的位置，那么如果用戶一直在滾動，那么事件監聽就一直在觸發，也是浪費性能。那么節流就是在一定時間間隔內觸發一次事件。話不多說，先看代碼。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>節流</title> <style> div { height: 5000px; } </style></head><body> <div>節流,節流,節流</div> <script> window.onload = function () { window.addEventListener('scroll',throttleHandle(throttle),false); //監聽綁定事件 } //節流函數 function throttleHandle (fn) { let timer = null, booleanVal = true; // 聲明一個變量標志做判斷 return function () { if (!booleanVal) { return } //如果事件正在執行，那么就返回，將布爾值改為false booleanVal = false; //事件未執行，創建事件 timer = setTimeout(function() { fn.apply(this,arguments); booleanVal = true; //事件執行完將布爾值改回 },300) } } //執行函數 function throttle() { var scrollNum = document.documentElement.scrollTop || document.body.scrollTop; console.log(scrollNum); } </script></body></html>這樣，在某些特定的工作場景，我們就可以使用防抖與節流來減少不必要的損耗。最后提一個問題，上句提到造成不必要的損耗，那么請問是什么損耗呢？
總結
以上所述是小編給大家介紹的JS中的防抖與節流及作用詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
