函數節流和防抖

一、函數節流

  1)定義:一個函數執行一次後,只有大於設定的執行週期後纔會執行第二次

  2)原理:用時間戳來判斷是否已到回調該執行時間,記錄上次執行的時間戳,然後每次觸發 scroll 事件執行回調,回調中判斷當前時間戳距離上次執行時間戳的間隔是否已經到達 規定時間段,如果是,則執行,並更新上次執行的時間戳,這樣循環下去

       image.pngimage.png

二、函數防抖

    1)定義:一個需要頻繁觸發的函數,在規定時間內,只讓最後一次執行,前面的不執行

    2)原理:第一次調用函數,創建一個定時器,在指定的時間間隔之後運行代碼。當第二次調用該函數時,它會清除前一次的定時器並設置另一個。如果前一個定時器已經執行過了,這個操作就沒有任何意義。然而,如果前一個定時器尚未執行,其實就是將其替換爲一個新的定時器,然後延遲一定時間再執行

          image.pngimage.png

三、應用

函數節流和函數去抖的核心其實就是限制某一個方法被頻繁觸發,比如說DOM事件的監聽回調,input的keyup、keydown,window.scroll,window.resize事件,按鈕連續變態點擊導致無限制發送接口請求等應用場景


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章