// 防抖函式
function debounce(fn, delay) , delay)}}
實現思路如下，將目標方法（動作）包裝在settimeout裡面，然後這個方法是乙個事件的**函式，如果這個**一直執行，那麼這些動作就一直不執行。為什麼不執行呢，我們搞了乙個cleartimeout，這樣settimeout裡的方法就不會執行！ 為什麼要cleartimeout呢，我們就需要將事件內的連續動作刪掉嘛！待到使用者不觸發這事件了。那麼settimeout就自然會執行這個方法。
那麼這個方法用在什麼地方呢，就是用於input輸入框架的格式驗證，假如只是驗證都是字母也罷了，太簡單了，不怎麼耗效能，如果是驗證是否身份證，這效能消耗大，你可以隔170ms才驗證一次。這時就需要這個東西。或者你這個是自動完全，需要將已有的輸入資料往後端拉乙個列表，頻繁的互動，後端肯定耗不起，這時也需要這個，如隔350ms。
function debounce(func, delay) ,delay)
};};var validate = debounce(function(e) , 380); // 繫結監聽 document.queryselector("input").addeventlistener('input', validate)
// 節流函式
function throttle(fn, delay)
timer = true
settimeout(()=>, delay)}}
防抖和節流
相同:在不影響客戶體驗的前提下,將頻繁的**函式,進行次數縮減.避免大量計算導致的頁面卡頓.
不同:防抖是將多次執行變為最後一次執行，節流是將多次執行變為在規定時間內只執行一次.
防抖定義:
指觸發事件後在規定時間內**函式只能執行一次，如果在規定時間內又觸發了該事件，則會重新開始算規定時間。
網上有這個比喻:函式防抖就是法師發技能的時候要讀條，技能讀條沒完再按技能就會重新整理技能,重新進行讀條。
四個字總結就是 延時執行
應用場景:
兩個條件:
1,如果客戶連續的操作會導致頻繁的事件**(可能引起頁面卡頓).
2,客戶只關心"最後一次"操作(也可以理解為停止連續操作後)所返回的結果.
節流定義:
當持續觸發事件時，在規定時間段內只能呼叫一次**函式。如果在規定時間內又觸發了該事件，則什麼也不做,也不會重置定時器.
與防抖比較:
防抖是將多次執行變為最後一次執行，節流是將多次執行變為在規定時間內只執行一次.一般不會重置定時器. 即不會if (timer) cleartimeout(timer);(時間戳+定時器版除外)
應用場景:
兩個條件:
1,客戶連續頻繁地觸發事件
2,客戶不再只關心"最後一次"操作後的結果反饋.而是在操作過程中持續的反饋.
例如:滑鼠不斷點選觸發，點選事件在規定時間內只觸發一次(單位時間內只觸發一次)
監聽滾動事件，比如是否滑到底部自動載入更多，用throttle來判斷
深入理解JS防抖與節流
日常開發過程中，滾動事件做複雜計算頻繁呼叫 函式很可能會造成頁面的卡頓，這時候我們更希望把多次計算合併成一次，只操作乙個精確點，js把這種方式稱為debounce 防抖 和throttle 節流 當持續觸發事件時，一定時間段內沒有再觸發事件，事件處理函式才會執行一次，如果設定時間到來之前，又觸發了事...
防抖與節流方案 函式防抖和節流
在前端開發的過程中，我們經常會需要繫結一些持續觸發的事件，如 resize scroll mousemove 等等，但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁地去執行函式。通常這種情況下我們怎麼去解決的呢？一般來講，防抖和節流是比較好的解決方案。讓我們先來看看在事件持續觸發的過程中頻繁執行...
函式防抖和節流
在前端開發的過程中，我們經常會需要繫結一些持續觸發的事件，如 resize scroll mousemove 等等，但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁地去執行函式。通常這種情況下我們怎麼去解決的呢？一般來講，防抖和節流是比較好的解決方案。讓我們先來看看在事件持續觸發的過程中頻繁執行...