防抖節流二者做的處理最終想要達到的目的就是減少對來自於頁面的操作。限制使用者互動次數，避免頻繁請求。
主要用於一些可能會短時間內頻繁操作的事件。例如click、scroll、resize、keydown、mousemove，input等，對於這一類事件，會很有可能被重複操作，重複向伺服器請求資料。這樣就很影響效能。
在搜尋的時候，搜尋引擎一般會根據使用者輸入的進行聯想操作，或者當你輸入一段關鍵字之後直接幫你搜尋。這種情況下，如果使用者按鍵鬆開後就去請求資料的，那麼將會造成過多的請求伺服器資料。這種無疑會造成請求資源的浪費。我將針對input這乙個事件來寫相應的防抖和節流。
以輸入框為例，我將給input繫結input事件，當鍵盤鬆開則在控制台列印此時input框內的內容。
let input = $('.input');
input.on("input", function());
防抖的意思：
在事件觸發指定時間之後才會執行相應的處理，若在這指定時間內事件又被呼叫，則會重新計時執行。
所以如果事件一直在指定時間內連續的執行，則不會觸發相應處理。直到一次指定時間內沒有事件被執行，才會執行一次相應的處理。
const anti_shake = function()
timer = settimeout(() => , 500);
}}const ctrl = anti_shake();
document.getelementbyid("input").addeventlistener('input', function(e));
可以看到在輸入暫停500ms之後才會觸發事件，不停下來不會觸發事件。
節流的意思：
事件觸發後在指定時間後執行相應的事件處理，如果在這個指定時間內再次觸發事件，事件不會被執行。
const throttling = function()
lock = true; // 開啟鎖，阻止其他事件
// 執行操作
console.log(val);
settimeout(() => , 500); }}
const ctrl = throttling();
document.getelementbyid("input").addeventlistener('input', function(e));
一直輸出的話就會每隔一段時間處理相應的操作。
JS中的防抖和節流
防抖和節流是前端優化的一部分，可以防止過多的請求。在剛開始做專案的時候還沒有意識到，但是到了企業級開發或者大專案開發的時候，要考慮防抖和節流。詳細請參考js 防抖動與節流 怎麼理解 防抖其實是使某一函式 請求 在使用者結束操作後的規定時間後再執行。應用場景 比如在表單輸入時一般要進行非空校驗，如果沒...
JS 中的防抖和節流
防抖 當持續觸發事件時，一定時間段內沒有再觸發事件，事件處理函式才會執行一次，如果設定的時間到來之前，又一次觸發了事件，就重新開始延時。防抖 function debounce fn,wait 處理函式 function handle 滾動事件 window.addeventlistener scr...
js防抖和節流
在進行視窗的resize scroll，輸入框內容校驗等操作時，如果事件處理函式呼叫的頻率無限制，會加重瀏覽器的負擔，導致使用者體驗非常糟糕。此時我們可以採用debounce 防抖 和throttle 節流 的方式來減少呼叫頻率，同時又不影響實際效果。函式防抖 函式防抖 debounce 當持續觸發...