函式節流和函式防抖

2022-04-10 03:57:16 字數 2074 閱讀 3208

函式節流:觸發函式事件後,短時間間隔內無法連續呼叫,只有上一次函式執行後,過了規定的時間間隔,才能進行下一次的函式呼叫。

原理:當某個事件一直在觸發(onscroll),設定乙個間隔時間,判斷當前呼叫時間與上次呼叫時間差值是否大於間隔時間,若大於,呼叫目標函式,反之,將當前時間賦值給上次呼叫時間,接著迴圈。

應用場景:改善呼叫onscroll事件時,一直監控頁面行為。在滾動過程中,每隔一段時間在去計算這個判斷邏輯。而函式節流所做的工作就是每隔一段時間去執行一次原本需要無時不刻地在執行的函式,所以在滾動事件中引入函式的節流是乙個非常好的實踐。

**實現:

let starttime = date.now(); //

開始時間

let time = 500; //

間隔時間

let timer;

window.onscroll = function

throttle()

else

, 50);}}

函式防抖:js中,多次觸發事件後,事件處理函式只執行一次,並且是在觸發操作結束時執行。

原理:對處理函式進行延時操作,若設定的延時到來之前,再次觸發事件,則清除上一次的延時操作定時器,重新定時。應用場景:註冊時,驗證使用者輸入的使用者是否已占用,未使用函式防抖技術時,一般做法是在使用者每輸入乙個符號後,進行一次ajax請求,如此一來,不僅對伺服器的壓力增大了,對使用者體驗也未必比原來的好。而理想的做法應該是這樣的,當使用者輸入第乙個字元後的一段時間內如果還有字元輸入的話,那就暫時不去請求判斷使用者名稱是否被占用。直到使用者停止輸入一段時間(自己設定乙個時間引數),再去觸發ajax請求。

**實現:

源**:

忽略有點稍微不整齊的排版(#^.^#)

函式防抖和函式節流

1 函式防抖 函式防抖是指頻繁觸發的情況下,只有足夠的時間,才執行 一次,函式防防抖的要點也是要乙個settimeout來輔助實現,延遲執行需要跑的 如果方法多次觸發,則把上次記錄的延遲執行 用cleartimeout清理掉,重新開始。如果計時完畢,沒有方法來訪問觸發。則執行 函式防抖的應用場景,最...

函式防抖和函式節流

首先分別用一句話區分函式防抖和節流的區別。函式防抖就是在使用者停下相應動作,並在給定時間過去之後僅被呼叫一次。函式節流是使用者在執行相應動作時,每隔一段時間發一次請求。針對一些頻繁觸發的事件如scroll keyup resize,如果正常繫結事件的話,可能在很短的時間內連續觸發事件,十分影響效能。...

函式節流和函式防抖

概念 在規定的時間段內 例如1000ms 即使事件觸發了很多次,都只執行一次對應的任務。栗子 在我們進入地鐵站時通過閘機,每隔3秒內只允許乙個人通過,即使多個人同時刷卡,也只允許乙個人通過。運用場景 如果我們在改變瀏覽器的大小或者監聽滑鼠移動事件等事件 短時間內觸發多次 為了節省瀏覽器效能開銷,就可...