所謂防抖，就是指觸發事件後 n 秒後才執行函數，如果在 n 秒内又觸發了事件，則會重新計算函數執行時間。 防抖類型分為 非立即執行版 立即執行版 合成版本 防抖
登入、發短信等按鈕避免使用者點選太快，以緻于發送了多次請求 調整浏覽器視窗大小時，resize 次數過于頻繁，造成計算過多，此時需要一次到位 文本編輯器實時儲存，當無任何更改操作一秒後進行儲存
非立即執行版的意思是觸發事件後函數不會立即執行，而是在 n 秒後執行，如果在 n 秒内又觸發了事件，則會重新計算函數執行時間。
立即執行版的意思是觸發事件後函數會立即執行，然後 n 秒内不觸發事件才能繼續執行函數的效果。
代碼解析 當 執行 <code>debounce</code> 函數時， 第一次進來時，<code>timeout</code> 為false，是以 <code>callNow</code> 的值 為 <code>true</code> ,那麼它會立即執行 <code>func</code> 函數，這時 <code>timeout</code> 的值 為 <code>true</code> , 當 <code>timeout 值為true 時</code>， 會執行 清空定時器，<code>此時 timeout 又為 false 了</code> , 這時 <code>callNow</code> 又 為 <code>true</code> ,再次執行 <code>func</code> 函數。 一直循環這樣的操作： 當 <code>timeout</code> 為 <code>false</code> 時，會立刻執行 <code>func</code> 函數。 當 <code>timeout</code> 為 <code>true</code> 時，它會執行<code>clearTimeOut</code> ，這時<code>timeout</code> 又為 <code>false</code>, 而 <code>callNow</code> = <code>! timeout</code> , 就會立刻執行 <code>func</code> 函數了。
通過傳遞 <code>Boolean</code> 來決定執行哪種版本。 <code>true</code> 為立即執行版 <code>false</code> 為非立即執行版本 <code>debounce(func,1000,true)</code>
所謂節流，就是指連續觸發事件但是在 n 秒中隻執行一次函數。 節流會稀釋函數的執行頻率。 節流有兩種實作： 時間戳版本 定時器版本
<code>scroll</code> 事件，每隔一秒計算一次位置資訊等 浏覽器播放事件，每個一秒計算一次進度資訊等 <code>input</code> 輸入框在搜尋内容時，可以控制多少s 在執行請求，避免多次發起請求，節約性能。
當執行 <code>throttle</code> 函數時，<code>timeout</code> 預設為<code>undefined</code> , 此時，<code>! timeout</code> 為 <code>true</code> 時，執行 定時器，并且 将 <code>timeout</code> 為 null，即為<code>false</code>, 再次執行<code>throttle</code> 函數時，<code>!timeout</code> 又為 <code>true</code> ，再次執行定時器。 **通過 <code>timeout</code> 的狀态來達到節流的控制 **
❤️關注+點贊+收藏+評論+轉發❤️，原創不易，鼓勵筆者創作更好的文章 關注公衆号 前端自學社群，即可擷取更多前端高品質文章！ 關注後回複關鍵詞“加群”， 即可加入 “前端自學交流群”，共同學習進步。 關注後添加我微信拉你進技術交流群 歡迎關注公衆号，更多精彩文章隻在公衆号推送
https://github.com/mqyqingfeng/Blog/issues/26