截流防抖函式經常用在頻繁按鈕操作,頁面滾動觸發,滑鼠拖拽,輸入查詢等功能中。是為了在頻繁操作中為了減少效能損耗的小技巧,這兩個概念常用但是又容易混淆,下面簡單的分析下防抖與截流的異同之處
意味著防止抖動出現的誤操作,也就是防止像抖動一樣的頻繁操作。所以在防抖函式裡會有個時間限制,當函式在一次執行之後的這個時間限制範圍內是不會再次發生的,再次觸發的話又要等乙個時間限制的時間,**如下
// 防抖函式:呼叫後在一定的時間內函式不執行,過了限時執行,
//在限時內再次呼叫會重新開啟定時器
function
debounce
(func, delay)
;}
和防抖一樣,也是限制在一段時間限制內頻繁的操作。但是它和防抖不同的地方在於,它在每乙個時間限制內會執行一次,**如下
// 截流函式:呼叫後在限時內執行一次,限時內再次呼叫,
//函式執行判斷條件為關閉狀態,函式不執行,函式執行後判斷條件開啟
function
throttle
(func, limit)
, limit);}
};}
兩個函式都用了定時器,但是定時器的作用不一樣,防抖是用來執行函式,截流是用來改變下次函式執行的判斷條件,選擇用哪種,看具體應用場景而定。 函式截流和防抖
使用場景 有些時候,部分函式會高頻觸發,比如 function showtop window.onscroll showtop 這個函式的觸發頻率非常的高,然而實際上我們並不需要如此高頻的反饋,畢竟瀏覽器的效能是有限的,不應該浪費在這裡,優化這種場景的做法就是防抖。其他使用場景 頁面resize事件...
js 防抖 截流
突發奇想,在觸發事件的時候,一些會頻繁觸發的事件會不會造成資源的浪費或者大量的計算造成頁面卡頓,比如onresize,onscroll,onmousemove等事件。然後就引出了乙個新知識點 防抖 截流。防抖 是指在事件觸發結束後延時一段時間再去執行 如果在延時期間再次觸發該事件,則重新計算延時時間...
防抖與截流總結
防抖 是指在事件觸發結束後延時一段時間再去執行 如果在延時期間再次觸發該事件,則重新計算延時時間 第乙個引數為事件觸發後需要執行的方法,第二個引數為延時時間function debounce method,delay timer settimeout function delay let fun d...