小議函式的節流和防抖

在前端開發中有一部分使用者行為會頻繁的觸發事件執行，而對於dom的操作、資源載入等耗費效能的處理，很可能會導致介面卡頓，甚至瀏覽器奔潰。函式的節流與防抖就是為了解決類似需求而產生的。

主要應用場景有：scroll、touchmove

防抖：抖動停止後的時間超過設定的時間時執行一次函式。注意：這裡的抖動停止表示你停止了觸發這個函式，從這個時間點開始計算，當間隔時間等於你設定時間，才會執行裡面的**函式。如果你一直在觸發這個函式並且兩次觸發間隔小於設定時間，則一定不會到**函式那一步。

主要應用場景有：input驗證、搜尋聯想、resize

節流實現思路就是定乙個時間間隔，在這個時間間隔範圍內，只會執行一次函式。

防抖實現思路是首次執行時把定時器賦值給乙個變數，第二次執行時，如果間隔沒超過定時器設定的時間則會清除掉定時器，重新設定定時器，依次反覆，當我們停止下來時，沒有執行清除定時器，超過一定時間後觸發**函式

節流函式

// 1. 思考不用定時器可以實現麼，讓我們試試

function throttle(fn, delay = 1000) else 
}}// 2. 有定時器為什麼不用呢，哈哈哈
function throttle(fn, delay = 1000) 
else ,delay);}}
} // test 
window.addeventlistener('scroll', throttle(foo,1000));
function foo()

// 1. 無定時器

// function debounce(fn, delay = 1000) else 
// } 
// }
// 2. 有定時器
function debounce(fn, delay = 1000) ,delay);
}} // test 
window.addeventlistener('scroll', debounce(foo,1000));
function foo()

防抖與節流方案 函式防抖和節流

在前端開發的過程中，我們經常會需要繫結一些持續觸發的事件，如 resize scroll mousemove 等等，但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁地去執行函式。通常這種情況下我們怎麼去解決的呢？一般來講，防抖和節流是比較好的解決方案。讓我們先來看看在事件持續觸發的過程中頻繁執行...

函式防抖和節流

在前端開發的過程中，我們經常會需要繫結一些持續觸發的事件，如 resize scroll mousemove 等等，但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁地去執行函式。通常這種情況下我們怎麼去解決的呢？一般來講，防抖和節流是比較好的解決方案。讓我們先來看看在事件持續觸發的過程中頻繁執行...

函式防抖和節流

在前端開發的過程中，我們經常會需要繫結一些持續觸發的事件，如 resize scroll mousemove 等等，但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁地去執行函式。通常這種情況下我們怎麼去解決的呢？一般來講，防抖和節流是比較好的解決方案。讓我們先來看看在事件持續觸發的過程中頻繁執行...