日常開發過程中，滾動事件做複雜計算頻繁呼叫**函式很可能會造成頁面的卡頓，這時候我們更希望把多次計算合併成一次，只操作乙個精確點，js把這種方式稱為debounce（防抖）和throttle（節流）
當持續觸發事件時，一定時間段內沒有再觸發事件，事件處理函式才會執行一次，如果設定時間到來之前，又觸發了事件，就重新開始延時。也就是說當乙個使用者一直觸發這個函式，且每次觸發函式的間隔小於既定時間，那麼防抖的情況下只會執行一次。
function debounce(fn, wait)
}// 處理函式
function handle()
// 滾動事件
如上所見，當持續觸發scroll函式，handle函式只會在1秒時間內執行一次，在滾動過程中並沒有持續執行，有效減少了效能的損耗
當持續觸發事件時，保證在一定時間內只呼叫一次事件處理函式，意思就是說，假設乙個使用者一直觸發這個函式，且每次觸發小於既定值，函式節流會每隔這個時間呼叫一次
用一句話總結防抖和節流的區別：防抖是將多次執行變為最後一次執行，節流是將多次執行變為每隔一段時間執行
實現函式節流我們主要有兩種方法：時間戳和定時器
例如
var throttle = function(func, delay)
}}function handle()
window.addeventlistener('scroll', throttle(handle, 1000));
這個節流函式利用時間戳讓第一次滾動事件執行一次**函式，此後每隔1000ms執行一次，在小於1000ms這段時間內的滾動是不執行的
再舉乙個定時器的例子：
var throttle = function(func, delay) , delay);}}
}function handle()
window.addeventlistener('scroll', throttle(handle, 1000));
當觸發事件的時候，我們設定了乙個定時器，在沒到1000ms之前這個定時器為null，而到了規定時間執行這個函式並再次把定時器清除。也就是說當第一次觸發事件，到達規定時間再執行這個函式，執行之後馬上清除定時器，開始新的迴圈，那麼我們看到的效果就是，滾動之後沒有馬上列印，而是等待1000ms列印，有乙個延遲的效果，並且這段時間滾動事件不會執行函式。
單用時間戳或者定時器都有缺陷，我們更希望第一次觸發馬上執行函式，最後一次觸發也可以執行一次事件處理函式
在節流函式內部使用開始時間starttime、當前時間curtime和剩餘時間remaining，當剩餘時間小於等於0意味著執行處理函式，這樣保證第一次就能立即執行函式並且每隔delay時間執行一次；如果還沒到時間，就會在remaining之後觸發，保證最後一次觸發事件也能執行函式，如果在remaining時間內又觸發了滾動事件，那麼會取消當前的計數器並計算出新的remaing時間。通過時間戳和定時器的方法，我們實現了第一次立即執行，最後一次也執行，規定時間間隔執行的效果，可以靈活運用在開發中
ps：防抖和節流能有效減少瀏覽器引擎的損耗，防止出現頁面堵塞卡頓現象，應該熟練掌握。最後再次感謝原作者的總結，熱心分享技術讓我們的生活變得更好
深入理解防抖和節流函式
防抖函式 function debounce fn,delay delay 實現思路如下，將目標方法 動作 包裝在settimeout裡面，然後這個方法是乙個事件的 函式，如果這個 一直執行，那麼這些動作就一直不執行。為什麼不執行呢，我們搞了乙個cleartimeout，這樣settimeout裡的...
js防抖與節流
在效能上，防抖和節流還是很重要的，處理不當或者放任不管就容易引起瀏覽器卡死。我們開發頁面經常會遇到乙個返回頂部的功能。這個按鈕只會在滾動到距離頂部一定位置之後才出現 問題 mounted methods else 效果圖 在執行的時候會發現存在乙個問題 這個函式的預設執行頻率，太！高！了！然而實際上...
js節流與防抖
函式防抖 debounce 觸發高頻事件後n秒內函式只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間。函式節流 throttle 高頻事件觸發，但在n秒內只會執行一次，所以節流會稀釋函式的執行頻率。函式節流 throttle 與 函式防抖 debounce 都是為了限制函式的執行頻次，以優...