概念：函式防抖（debounce），就是指觸發事件後，在 n 秒內函式只能執行一次，如果觸發事件後在 n 秒內又觸發了事件，則會重新計算函式延執行時間。
舉個栗子，坐電梯的時候，如果電梯檢測到有人進來（觸發事件），就會多等待 10 秒，此時如果又有人進來（10秒之內重複觸發事件），那麼電梯就會再多等待 10 秒。在上述例子中，電梯在檢測到有人進入 10 秒鐘之後，才會關閉電梯門開始執行，因此，「函式防抖」的關鍵在於，在 乙個事件 發生 一定時間 之後，才執行 特定動作。前端開發過程中，有一些事件，常見的例如，onresize，scroll，mousemove ,mousehover 等，會被頻繁觸發（短時間內多次觸發），不做限制的話，有可能一秒之內執行幾十次、幾百次，如果在這些函式內部執行了其他函式，尤其是執行了操作 dom 的函式（瀏覽器操作 dom 是很耗費效能的），那不僅會浪費計算機資源，還會降低程式執行速度，甚至造成瀏覽器卡死、崩潰。這種問題顯然是致命的。
除此之外，短時間內重複的 ajax 呼叫不僅會造成資料關係的混亂，還會造成網路擁塞，增加伺服器壓力，顯然這個問題也是需要解決的。根據上面對問題的分析，細細思索，可以想到如下解決方案。
函式防抖的要點，是需要乙個 settimeout 來輔助實現，延遲執行需要執行的**。如果方法多次觸發，則把上次記錄的延遲執行**用 cleartimeout 清掉，重新開始計時。若計時期間事件沒有被重新觸發，等延遲時間計時完畢，則執行目標**。根據以上分析，我們對 「函式防抖」 來進行簡單的**實現，如下：
函式防抖一般用在什麼情況之下呢？一般用在，連續的事件只需觸發一次**的場合。具體有：
搜尋框搜尋輸入。只需使用者最後一次輸入完，再傳送請求；
使用者名稱、手機號、郵箱輸入驗證；
瀏覽器視窗大小改變後，只需視窗調整完後，再執行 resize 事件中的**，防止重複渲染。
目前遇到過的用處就是這些，理解了原理與實現思路，小夥伴可以把它運用在任何需要的場合，提高**質量。
函式防抖其實是分為 「立即執行版」 和 「非立即執行版」 的，根據字面意思就可以發現他們的差別，所謂立即執行版就是 觸發事件後函式不會立即執行，而是在 n 秒後執行，如果在 n 秒內又觸發了事件，則會重新計算函式執行時間。 而 「非立即執行版」 指的是 觸發事件後函式會立即執行，然後 n 秒內不觸發事件才能繼續執行函式的效果。。
在開發過程中，我們需要根據不同的場景來決定我們需要使用哪乙個版本的防抖函式，一般來講上述的防抖函式都能滿足大部分的場景需求。但我們也可以將非立即執行版和立即執行版的防抖函式結合起來，實現最終的雙劍合璧版本的防抖函式，以下為小夥伴們做了簡單的實現：
js中的防抖函式
舉個例子 我們直接執行了乙個 refresh 這個refresh函式會被執行30次,這樣的話就太過於頻繁了,我們就可以將refresh放入防抖函式中去,生成乙個新的函式,之後,我們就使用新的函式 上面說的可能有些抽象了,看看下面的 估計會好理解一些 封裝乙個防抖動方法 debounce 防抖函式,它...
js 中函式的防抖和節流
1.函式的防抖，類似於法師技能讀條，每點選一次技能，技能都會重新引導，使用場景如搜尋時使用者輸入資訊 2.函式的節流，類似於fps遊戲槍械的射擊頻率，即使一直按著左鍵，但是每秒射出的子彈是一定的，使用場景如監聽使用者滑到底部載入更多 例子 在html裡寫乙個input，呼叫如下 ajax函式就是模擬...
js中函式節流與函式防抖
函式節流 概念 設定乙個特定時間，讓函式在特定的事件內只執行一次。實現原理 settimeout 控制狀態的鎖 例項 需求 使用者點選按鈕列印 你好！我是知秋y 並且在點選按鈕後3秒後才能再列印，期間使用者點選列印不會執行列印 你好！我是知秋y 實現 函式防抖 例子 電腦在無操作的2分鐘後將進入休眠...