js中防抖與節流的實現

2021-10-18 13:22:13 字數 1481 閱讀 1563

效果:短時間內一直觸發事件時,只執行最後一次觸發的函式

**:借助settimeout來實現,當下次觸發事件時,如果settimeout已經存在,則清除settimeout並重新計算時間

/* 

fn: 要執行的函式

delay: 延遲執行時間ms

args: fn函式的引數(陣列)

context: fn函式的this指向(預設是函式執行時的上下文環境)

*/function

debounce

(fn, delay, args, context)

timer =

settimeout

(function()

, delay)}}

function

handle()

window.onscroll =

debounce

(handle,

1000

);

效果:短時間內一直觸發事件,在觸發時間內每隔一段時間執行一次觸發的函式

**:借助標記位settimeout,在settimeout開始計算時間後,將標記位設定為false,等待函式執行,當函式執行後,將標記位設定為true,進行下一次的settimeout

/* 

fn: 要執行的函式

delay: 延遲執行時間ms

args: fn函式的引數(陣列)

context: fn函式的this指向(預設是函式執行時的上下文環境)

*/function

throttle

(fn, delay, args, context)

, delay)}}

}function

handle()

window.onscroll =

throttle

(handle,

1000

);

如果有另外的需求,比如說首次觸發要執行

function

throttle

(fn, delay, args, context)

elseif(

!timer)

, delay)

} starttime = date.

now();

}}

function

throttle

(fn, delay, args, context)

, delay)}if

(flag)

}}

小結

js防抖與節流

在效能上,防抖和節流還是很重要的,處理不當或者放任不管就容易引起瀏覽器卡死。我們開發頁面經常會遇到乙個返回頂部的功能。這個按鈕只會在滾動到距離頂部一定位置之後才出現 問題 mounted methods else 效果圖 在執行的時候會發現存在乙個問題 這個函式的預設執行頻率,太!高!了!然而實際上...

js節流與防抖

函式防抖 debounce 觸發高頻事件後n秒內函式只會執行一次,如果n秒內高頻事件再次被觸發,則重新計算時間。函式節流 throttle 高頻事件觸發,但在n秒內只會執行一次,所以節流會稀釋函式的執行頻率。函式節流 throttle 與 函式防抖 debounce 都是為了限制函式的執行頻次,以優...

js實現函式防抖與節流

防抖 在事件被觸發n秒後再執行 如果在這n秒內又被觸發,則重新計時。節流 規定在乙個單位時間內,只能觸發一次函式。如果這個單位時間內觸發多次函式,只有一次生效。js函式防抖與節流的區別 函式防抖是某一段時間內只執行一次,而函式節流是間隔時間執行。1 通過理解函式防抖與函式節流的概念後,使用閉包實現函...