防抖和節流

2022-03-31 00:41:56 字數 1082 閱讀 3402

前言

今年3月份阿里面試題其中之一就是防抖與節流,可解決使用者體驗及改善高頻發事件導致瀏覽器或伺服器帶來的效能問題。

場景

瀏覽器條滾動onscroll事件,input輸入框input事件,視窗大小改變onresize事件,滑鼠移動onmousemove事件等等。

防抖 (debounce)

概念:持續的觸發事件,在規定時間內沒有再次去觸發事件,才會去執行函式,如果在規定事件內又觸發了事件,那事件還會繼續,直到不在規定事件內觸發事件為止

概括:通俗一點的話就是有乙個函式1000秒後執行,如果在1000秒之前有其他觸發事件,那將會清除掉之前的settimeout註冊的id,再去註冊乙個新的settimeout的id去執行

舉例:

"

text

" id="

debounce

" @input="

input

" />

第二種方法

"

throttle

">

for="

item in 1000

" :key="

item

">}

2.setinterval

重點

let timeoutid =settimeout(function() {}, 

1000);

settimeout竟然有返回值,他會返回乙個整數,返回值主要是用來表示什麼的呢?是為了去註冊乙個settimeout的id,這個id是動態的,在同乙個觸發事件下,id代表的是唯一,是不重複的,這樣我們就可以根據id去判斷settimeout到底是哪乙個

題外話

如果有能力的小夥伴可以去阿里面試試試哦,當時我面試的時候遇到了一些不會不懂的地方,面試官都會很耐心的提示一些資訊,態度也特別的好,同時也可以積累經驗,good luck

防抖和節流 什麼是防抖和節流

目錄二 節流 有這樣一種情況,想象有乙個表單,點選提交按鈕就傳送請求給伺服器。如果使用者在很短的時間間隔內 手抖 點選了多次,又或者是惡意點選,那麼就將傳送多個請求。該行為將造成伺服器額外的不必要負載。所謂防抖,實際上就是是處理這種常見的情況的描述。submit該段 當點選submit按鈕的時候,將...

防抖和節流

在前端開發過程中,我們經常需要繫結一些持續觸發事件,如 resize scroll mousemove等等,但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁的去執行函式。通常這種情況下,我們怎麼去解決呢?一般來講,防抖和節流是比較好的解決方案。一 函式的防抖 1 什麼是函式防抖 函式防抖 deb...

防抖和節流

防抖和節流的作用都是防止函式多次呼叫。區別在於,假設乙個使用者一直觸發這個函式,且每次觸發函式的間隔小於設定的時間,防抖的情況下只會呼叫一次,而節流的情況會每隔一定時間呼叫一次函式。1.防抖 函式防抖 debounce n秒內函式只會執行一次,如果n秒內高頻事件再次被觸發,則重新計算時間。如下例,對...