在連續觸發的事件中，事件處理函式的頻繁呼叫會加重瀏覽器或伺服器的效能負擔導致使用者體驗糟糕，有哪些連續觸發的事件呢 ?
比如，瀏覽器滾動條的滾動事件、瀏覽器視窗調節的resize事件、輸入框內容校驗以及在移動端的touchmove事件等
所以，我們將採用防抖函式(debounce )和節流函式(throttle)來限制事件處理函式的呼叫頻率
防抖，就是指觸發事件後在 n 秒內函式只能執行一次，如果在 n 秒內又觸發了該事件，則會重新計算函式執行時間
//防抖函式
function debounce(fn, wait = 500, immediate = true)
if (immediate)
timer = settimeout(() => , wait);
} else , wait);
}//5.立即執行時返回函式的返回值
原理解析：
防抖函式作用，對傳入的函式進行延時包裝後返回
settimeout在前一次未執行完前，第二次次觸發將會覆蓋掉前面的定時器，執行第二次的功能
前一次由於非同步加延時還未執行完，使用cleartimeout清除前面定時器，取消上次的fn功能
fn傳入為函式，不是函式的呼叫
function debounce(fn, wait = 500, immediate = true)
if (immediate)
timer = settimeout(() => , wait);
} else , wait);
}return result;};}
0
let box = document.queryselector(".container");
function handlemousemove()
let action = throttle(handlemousemove);
box.addeventlistener("mousemove", action);
//節流函式
參考文章
JS效能優化 防抖和節流
防抖和節流嚴格算起來應該屬於效能優化的知識，但實際上遇到的頻率相當高，處理不當或者放任不管就容易引起瀏覽器卡死。舉個例子吧 監聽滾動條的高度 需求很簡單，直接寫 function showtop window.onscroll showtop 但是！你會發現只要你一改變高度，它就會列印一次高度，隨便...
效能 防抖和節流
為了提高頁面效能，有時需要對高頻率觸發的事件 scrllo,resize,mousemove,touchmove 進行防抖 debounce 或者節流 throttle 處理。這兩個概念很相似，但是他們是不同的概念 把一系列連續的事件，只處理一次，即只呼叫一次事件處理程式。強調一系列連續觸發的事件。...
防抖和節流 什麼是防抖和節流
目錄二 節流 有這樣一種情況，想象有乙個表單，點選提交按鈕就傳送請求給伺服器。如果使用者在很短的時間間隔內 手抖 點選了多次，又或者是惡意點選，那麼就將傳送多個請求。該行為將造成伺服器額外的不必要負載。所謂防抖，實際上就是是處理這種常見的情況的描述。submit該段 當點選submit按鈕的時候，將...