JS節流和防抖

事件的觸發權很多時候都屬於使用者，有些情況下會產生問題：

如果你碰到這些問題，那就需要用到函式節流和防抖了。

函式節流：乙個函式執行一次後，只有大於設定的執行週期後才會執行第二次。

有個需要頻繁觸發函式，出於優化效能角度，在規定時間內，只讓函式觸發的第一次生效，後面不生效。

其原理是用時間戳來判斷是否已到**該執行時間，記錄上次執行的時間戳，然後每次觸發 scroll 事件執行**，**中判斷當前時間戳距離上次執行時間戳的間隔是否已經到達 規定時間段，如果是，則執行，並更新上次執行的時間戳，如此迴圈；

html,

body 

function throttle(fn, delay) 

}}document.onscroll = throttle(function() , 200)

需要間隔一定時間觸發**來控制函式呼叫頻率：

（常用版本）

呼叫函式時，通過上一次pre和現在now兩個變數，記錄呼叫時間的頻率，prev-now 如果大於約定的時間，才呼叫函式。呼叫函式結束後，把pre設定為現在的時間。

var throttle =function(func, delay) }}

function handle() 
window.addeventlistener(
'scroll
', throttle(handle, 1000));

其原理就第一次呼叫函式，建立乙個定時器，在指定的時間間隔之後執行**。當第二次呼叫該函式時，它會清除前一次的定時器並設定另乙個。如果前乙個定時器已經執行過了，這個操作就沒有任何意義。然而，如果前乙個定時器尚未執行，其實就是將其替換為乙個新的定時器，然後延遲一定時間再執行。

按鈕button>
 
js防抖和節流
在進行視窗的resize scroll，輸入框內容校驗等操作時，如果事件處理函式呼叫的頻率無限制，會加重瀏覽器的負擔，導致使用者體驗非常糟糕。此時我們可以採用debounce 防抖 和throttle 節流 的方式來減少呼叫頻率，同時又不影響實際效果。函式防抖 函式防抖 debounce 當持續觸發...
js 防抖和節流
突然被人問到節流和防抖的區別，一臉大寫的懵逼，一直以為他倆是乙個東西。那趕緊學習一下吧。定義 多次觸發事件後，事件處理函式只執行一次，並且是在觸發操作結束時執行。原理 對事件處理函式做延時執行，如果在設定的時間內再次觸發事件函式，清除定時器 cleartimeout 重新計時。適用場景 乙個輸入框連...
js 防抖和節流
很多 都會提供乙個按鈕 用於返回頂部。這個按鈕只會在滾動到距離頂部一定位置的時候才出現 監聽滾動事件，返回當前到頂部的距離 function showtop window.onscroll showtop 但是執行的時候存在乙個問題 函式預設執行頻率太高，按一次鍵盤的下方向鍵，函式就執行了9次！實際...