js函式防抖和節流

2021-10-02 04:25:37 字數 740 閱讀 9949

觸發事件在 n 秒內只會執行一次函式,如果在 n 秒內又觸發了事件,則會重新計算函式執行時間

作用就是限制觸發任務(介面呼叫)的頻率,一般用於關鍵字搜尋,表單驗證

demo:

handlesearch:

function()

}).then

(function

(data)).

catch

(function

(err))}

,1000

)}

連續觸發事件在一定時間內只會執行一次函式,作用就是限制觸發任務(介面呼叫)的頻率,一般用於頁面觸底載入更多

demo:

onreachbottom:

function()

//斷開開關,當前任務正在進行

this

.isloading =

true

//載入更多,頁數增加

this

.pagenum =

this

.pagenum +

1 loaddata:

function()

}).then

(function

(data)).

catch

(function

(err))}

}

相同點:

函式防抖與函式節流的作用都是限制觸發任務(介面呼叫)的頻率

不同點:

js防抖和節流

在進行視窗的resize scroll,輸入框內容校驗等操作時,如果事件處理函式呼叫的頻率無限制,會加重瀏覽器的負擔,導致使用者體驗非常糟糕。此時我們可以採用debounce 防抖 和throttle 節流 的方式來減少呼叫頻率,同時又不影響實際效果。函式防抖 函式防抖 debounce 當持續觸發...

js 防抖和節流

突然被人問到節流和防抖的區別,一臉大寫的懵逼,一直以為他倆是乙個東西。那趕緊學習一下吧。定義 多次觸發事件後,事件處理函式只執行一次,並且是在觸發操作結束時執行。原理 對事件處理函式做延時執行,如果在設定的時間內再次觸發事件函式,清除定時器 cleartimeout 重新計時。適用場景 乙個輸入框連...

js 防抖和節流

很多 都會提供乙個按鈕 用於返回頂部。這個按鈕只會在滾動到距離頂部一定位置的時候才出現 監聽滾動事件,返回當前到頂部的距離 function showtop window.onscroll showtop 但是執行的時候存在乙個問題 函式預設執行頻率太高,按一次鍵盤的下方向鍵,函式就執行了9次!實際...