js函式的節流與防抖

在前端開發中有一部分使用者行為會頻繁的觸發事件執行，而對於dom的操作、資源載入等耗費效能的處理，很可能會導致介面卡頓，甚至瀏覽器奔潰。函式的節流與防抖就是為了解決類似需求而產生的。

1）節流

場景：視窗調整(resize)、頁面滾動(scroll)、搶購瘋狂點選(movedown)

故事：阿里巴巴月餅門事件，中秋來臨，阿里特意做了乙個活動，搶月餅，但是每個人只能搶購一盒，有五位工程師寫了js指令碼，類似於12306的搶票軟體，直接刷了一百多盒月餅，結果被開除了四個.其實對於他們來說並不是什麼壞事，不知道有多少公司對他們敞開大門~那麼如何解決這種問題呢，就用到了函式的節流

1.1）案例(限時搶購)

我寫了這樣乙個簡單的事件，如下

html:1'

show
'>搶購2"
box">0

js:

1 let obtn=document.getelementbyid('
show')
2 let obox=document.getelementbyid('
box'
)3 obtn.onclick=function()

1.2）指令碼攻擊：這種簡單的數量增加很容易遭到指令碼的攻擊，從而造成很大的損失。**如下

for(let i=0;i<100;i++)

效果圖如下：

1.3）如何解決(節流)

上面並不是我們想要的結果，我們想要的是在規定時間內只能執行一次，比如1秒內只能執行一次.無論你點選多少次.

html:1'

show
'>搶購2"
box">0

js:

1 let obtn=document.getelementbyid('
show');
2     let obox=document.getelementbyid('
box');3
/*4handle:buy函式
5wait:規定在一秒鐘內只能執行一次6*/
7function throttle (handle, wait) 15}
16}17function buy()
20     obtn.onclick = throttle(buy, 1000)

這樣不僅可以達到想要的效果，還可以阻止惡意指令碼的攻擊.

2.防抖

概念：函式防抖就是函式需要頻繁觸發情況時，只有足夠空閒的時候，才會執行一次。好像公交司機會等人都上車後才會開車一樣.

場景：實時搜尋(keyup)、拖拽(mousemove)

2.1）.案例(實時搜尋)

在搜尋nba的時候，並不是每輸入乙個字元，都會想伺服器請求一次，而是在輸入完成後發出一次請求。

html:1'

text
' id='
ipt'/>

js:

1 let oipt = document.getelementbyid('
ipt');2
function ajax () 
5 oipt.oninput = ajax;

使用者無論輸入多快，都會發出請求，從而去載入伺服器資源，對效能有很大的影響.

2.3)解決(防抖)

1 let oipt = document.getelementbyid('

ipt'
);2     let time = null;3
function debounce (handle, delay) ,delay)11}
12}13function ajax (e) 
16     oipt.oninput = debounce(ajax, 1000)  //1s後發出請求

這種方法可以解決多次請求的問題，對效能有很大的提高。

喜歡的小夥伴點個關注哦~我會再接再厲的。

js防抖與節流

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

js節流與防抖

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

js實現函式防抖與節流

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