防抖（debounce）和節流（throttle）都是用來控制某個函式在一定時間內執行多少次的技巧，兩者相似而又不同。
函式去抖（debounce）：讓乙個函式在一定間隔內沒有被呼叫時，才開始執行被呼叫方法。
兩個方法都是用來提公升前端效能，減輕瀏覽器壓力。
防抖(debouncing)
像防抖還是很容易想到的，大概意思就是延時處理，然後如果在這段延時內又觸發了事件，則重新開始延時。
節流（throttle）
為什麼要函式節流
以下場景往往由於事件頻繁被觸發，因而頻繁執行dom操作、資源載入等重行為，導致ui停頓甚至瀏覽器崩潰。
我們的本意只是讓滑鼠滾動一次執行一次滾動函式，但是window的onscroll函式並不是等scroll結束之後才會呼叫，滑鼠滾動或拖動滾動條，就會不停的觸發scroll事件，如果處理的東西多，低版本的ie也會陷入假死狀態。
解決辦法
debounce
抖動：如果用手指一直按住乙個彈簧，它將不會彈起直到你鬆手為止。 也就是說當呼叫動作n毫秒後，才會執行該動作，若在這n毫秒內又呼叫此動作則將重新計算執行時間。這種比較適合window的resize事件，實際需求大多為停止改變大小n毫秒後執行後續處理；而其他事件大多的需求是以一定的頻率執行後續處理。針對這兩種需求就出現了和throttle兩種解決辦法。
去抖
window.onscroll = function();
function
debounce(method,context),500);
} function
lazyload()
效果如下，可以看出只執行了一次lazyload函式：
節流之後的滾動一次的執行效果
利用定時器，讓函式執行延遲500毫秒，在500毫秒內如果有函式又被呼叫則刪除上一次呼叫，這次呼叫500毫秒後執行，如此往復
去抖還有一種節流方式，是通過返回閉包的形式，可以設定延遲時間，兩者執行的結果是一樣，但是我在實際操作的時候設定延遲500時，滾動過了一會才執行了,設定為delay為100的時候在視覺上就沒有感覺延遲。而且函式也只滾動了一次。
functiondebounce1(method,delay),delay);
}}
防抖和節流 什麼是防抖和節流
目錄二 節流 有這樣一種情況，想象有乙個表單，點選提交按鈕就傳送請求給伺服器。如果使用者在很短的時間間隔內 手抖 點選了多次，又或者是惡意點選，那麼就將傳送多個請求。該行為將造成伺服器額外的不必要負載。所謂防抖，實際上就是是處理這種常見的情況的描述。submit該段 當點選submit按鈕的時候，將...
防抖和節流
在前端開發過程中，我們經常需要繫結一些持續觸發事件，如 resize scroll mousemove等等，但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁的去執行函式。通常這種情況下，我們怎麼去解決呢？一般來講，防抖和節流是比較好的解決方案。一 函式的防抖 1 什麼是函式防抖 函式防抖 deb...
防抖和節流
防抖和節流的作用都是防止函式多次呼叫。區別在於，假設乙個使用者一直觸發這個函式，且每次觸發函式的間隔小於設定的時間，防抖的情況下只會呼叫一次，而節流的情況會每隔一定時間呼叫一次函式。1.防抖 函式防抖 debounce n秒內函式只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間。如下例，對...