有一些瀏覽器事件可以在很短的事件內快速觸發多次，例如調整視窗大小或向下滾動頁面。例如，如果將事件***繫結到視窗滾動事件上，並且使用者繼續非常快速地向下滾動頁面，你的事件可能會在3秒的範圍內被觸發數千次。這可能會導致一些嚴重的效能問題,
如果在面試中討論構建應用程式和事件，如滾動、視窗調整大小，或鍵盤按下的事件時，一定要提及函式防抖動和函式節流來提公升頁面速度和效能。
直接繫結函式到scroll事件是非常錯誤的決定，當使用者滾動頁面時，頁面可能會變得非常慢甚至未響應。而函式防抖和函式節流是解決這個問題的一種方式，通過限制需要經過的事件，直至再次呼叫函式,在處理一些高頻率觸發的 dom 事件的時候，它們都能極大提高使用者體驗。
如果乙個事件被頻繁觸發多次，並且觸發的時間間隔過短，則防抖函式可以使得對應的事件處理函式只執行一次
// debounce函式用來包裹我們的事件處理方法
function debounce(fn, delay), delay)
}}function foo()
document.addeventlistener('scroll', debounce(foo, 50));
function throttle(fn, threshold),threshold)
}else
}}
函式防抖與函式節流
函式防抖 debounce 當呼叫動作過n毫秒後，才會執行該動作，若在這n毫秒內又呼叫此動作則將重新計算執行時間 函式節流 throttle 預先設定乙個執行週期，當呼叫動作的時刻大於等於執行週期則執行該動作，然後進入下乙個新週期 函式節流 throttle 與函式防抖 debounce 都是為了限...
函式節流與函式防抖
這裡以判斷頁面是否滾動到底部為例，普通的做法就是監聽window物件的scroll事件，然後再函式體中寫入判斷是否滾動到底部的邏輯 這樣做的乙個缺點就是比較消耗效能，因為當在滾動的時候，瀏覽器會無時不刻地在計算判斷是否滾動到底部的邏輯，而在實際的場景中是不需要這麼做的，在實際場景中可能是這樣的 在滾...
函式防抖與函式節流
前言 有一些瀏覽器事件我們不希望它很頻繁的觸發，如調整視窗大小 onresize 監聽滾動條滾動 onscroll 如果這些監聽事件需要呼叫介面的話一秒內可能會呼叫上百次，這樣坑定是有問題的。函式防抖 debounce 如果有人進電梯 觸發事件 那電梯將在10秒鐘後出發 執行事件 這時如果又有人進電...