在開發中經常會遇到一些頻繁的事件觸發，如onscroll，oninput之類的等事件。其實為了實現我們最終的功能，頻繁觸發的事件也許只有最後一次觸發才是我們想要的，那麼防抖函式就是幹這個用途的。我們給它乙個時間，告訴該函式，當前設定的時間內，只執行一次該函式，這樣就減少了非必要事件的執行。
現在我們設定乙個案例來實踐一下，比如說，我們在一次滾動事件，只想要滾動的最終值。
>
>
charset
="utf-8"
>
>
title
>
>
#parent
#child
style
>
head
>
>
"parent"
>
"child"
>
div>
div>
>
let $parent = document.
queryselector
("#parent");
// 先要初始化一次，保證呼叫的過程中都是呼叫同乙個閉包返回的函式
let dobouncefn =
dobounce
(getscrollval,
1000);
$parent.
onscroll
=function
(e)// 很明顯，利用了防抖後，我們的功能函式每秒只會取一次值
function
getscrollval()
// 防抖
// 1、防止函式多次重複執行
function
dobounce
(fn, wait)
let context =
this
;let args = arguments;
timer =
settimeout
(function()
, wait)}}
script
>
body
>
html
>
/**
* 防抖函式
* @param fn
* @param wait
*/function
dobounce
(fn, wait)
let context =
this
;let args = arguments;
timer =
settimeout
(function()
, wait)
}}
js中的防抖函式
舉個例子 我們直接執行了乙個 refresh 這個refresh函式會被執行30次,這樣的話就太過於頻繁了,我們就可以將refresh放入防抖函式中去,生成乙個新的函式,之後,我們就使用新的函式 上面說的可能有些抽象了,看看下面的 估計會好理解一些 封裝乙個防抖動方法 debounce 防抖函式,它...
js函式防抖和節流
觸發事件在 n 秒內只會執行一次函式，如果在 n 秒內又觸發了事件，則會重新計算函式執行時間 作用就是限制觸發任務 介面呼叫 的頻率，一般用於關鍵字搜尋，表單驗證 demo handlesearch function then function data catch function err 100...
JS函式節流 函式防抖
函式節流 throttle 函式節流 加入函式節流函式 使用方法 this.refs.throttle.addeventlistener scroll throttle that.console,300 函式防抖 debounce 很明顯，這樣的做法不好的是當使用者輸入第乙個字元的時候，就開始請求判...