常見的滾動監聽事件，每次滾動都會觸發，如此太過浪費效能，要如何優化呢？
思路：在第一次觸發事件的時候，不是立即執行函式，而是給出乙個delay時間值，例如200ms
效果：短時間內大量出發同一事件最終只會執行一次
實現：利用settimeout來實現計時器的功能
// 防抖
const debounce = (fn, delay) =>
// 進入此分支說明：當前沒有計時，則開始新的計時
timer = settimeout(fn, delay)}}
const showtop = () =>
window.onscroll = debounce(showtop, 1000)
需求：即使使用者不斷拖動滾動條，也可以在某個時間間隔後給出反饋？
思路：設計一種類似「青蛙」的函式，即讓函式執行一次後，在某個時間段內暫時失效（冬眠），等過了這個時間段再重新啟用（甦醒）
效果：短時間內大量觸發同一事件，函式執行一次之後在某個指定的時間內不再執行，直到過了這個指定的時間才會重新生效
實現：狀態位 / 時間戳 / settimeout標記
// 方案一：狀態位
const throttle = (fn, delay) =>
// 執行函式+把狀態位設定為無效
valid = false
settimeout(() => , delay)}}
const showtop = () =>
window.onscroll = throttle(showtop, 1000)
// 方案二：時間戳
const throttle = (fn, delay) =>
if (now - start >= delay) }}
const showtop = () =>
window.onscroll = throttle(showtop, 1000)
// 方案三：settimeout標記
const throttle = (fn, delay) => , delay)}}
} const showtop = () =>
window.onscroll = throttle(showtop, 1000)
節流：短時間內多次觸發，即使觸發仍在繼續也可以根據指定時間觸發一次函式————至少執行一次
防抖和節流的實現
當頁面發生滾動的時1s後執行函式 var timer null window.addeventlistener scroll function 1000 把函式抽出來 var timeout null function debounce 1000 window.addeventlistener sc...
實現防抖節流
防抖 debounce 不管事件觸發頻率多高，一定在事件觸發n秒後才執行，如果你在乙個事件觸發的 n 秒內又觸發了這個事件，就以新的事件的時間為準，n秒後才執行，總之，觸發完事件 n 秒內不再觸發事件，n秒後再執行。直接上 例如頁面視窗一直在改變 停止的是n秒後執行事件 window.onload ...
防抖和節流 什麼是防抖和節流
目錄二 節流 有這樣一種情況，想象有乙個表單，點選提交按鈕就傳送請求給伺服器。如果使用者在很短的時間間隔內 手抖 點選了多次，又或者是惡意點選，那麼就將傳送多個請求。該行為將造成伺服器額外的不必要負載。所謂防抖，實際上就是是處理這種常見的情況的描述。submit該段 當點選submit按鈕的時候，將...