首先**下面
原理：不斷地觸發事件，但是停下來後，只執行一次。即觸發n次function，但只執行最後的一次function。
使用場景：
滾動、滑鼠移動、window resize、防抖動事件、鍵盤事件keydown keyup
主體**:
var timer =
null
;function
debounce
(func, time, _this)
, time)
;}
不斷地觸發事件，但是只會在指定的時間內執行一次。即觸發n次function，但只在時間段內執行一次function。
使用場景：
滾動、滑鼠移動、window resize、鍵盤事件keydown keyup、按鈕搶票、秒殺等
主體**:
// 方案1 利用時間戳
var prevtime =
newdate()
.gettime()
;function
throttle
(fn, time, _this)
}
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
src=
"">
script
>
>
documenttitle
>
>
.container
.left,
.right
.left
.rightbox
.rightbox>div
.text
.line,
.line2
.line2
.regular,
.debounce,
.throttle
.regular .line
.debounce .line
.throttle .line
style
>
head
>
>
class
="container"
>
class
="left"
>
move your mouse here
div>
class
="right"
>
class
="rightbox"
>
class
="text"
>
regular
div>
class
="regular"
>
div>
div>
class
="rightbox"
>
class
="text"
>
debounce
div>
class
="debounce"
>
div>
div>
class
="rightbox"
>
class
="text"
>
throttle
div>
class
="throttle"
>
div>
div>
div>
div>
body
>
>
// 抖動
var timer =
null
;function
debounce
(func, time, _this)
, time);}
// 節流
var prevtime =
newdate()
.gettime()
;function
throttle
(fn, time, _this)}$
(document)
.ready
(function()
,5000
,this);
// throttle
throttle
(function()
,5000
,this)}
)})script
>
html
>
抖動與節流
當我們頻繁觸發同乙個事件，如 改變視窗大小 上下滾動滾動條 反覆向輸入框中輸入內容，就會頻繁的向後台傳送請求。直到任務完成時，之前的請求都是多餘的，嚴重影響使用者體驗和伺服器的效能。這種問題就叫抖動 可以在一定時間內監聽是否再次輸入，如果沒有再次輸入則認為本次輸入完成，傳送請求，否則就是判定使用者仍...
防抖動與節流
針對一些會頻繁觸發的事件如scroll resize，如果正常繫結事件處理函式的話，有可能在很短的時間內多次連續觸發事件，十分影響效能。所以我們對於這種事件我們要進行防抖動或者節流的處理來優化效能。防抖動 將幾次操作合併為一此操作進行。原理是維護乙個計時器，規定在delay時間後觸發函式，但是在de...
防抖動與節流
針對一些會頻繁觸發的事件如scroll resize，如果正常繫結事件處理函式的話，有可能在很短的時間內多次連續觸發事件，十分影響效能。它的做法是限制下次函式呼叫之前必須等待的時間間隔。正確實現debouncing的方法是將若干個函式呼叫合成一次，並在給定時間過去之後僅被呼叫一次。123 4567 ...