在進行視窗的resize、scroll，輸入框內容校驗等操作時，如果事件處理函式呼叫的頻率無限制，會加重瀏覽器的負擔，導致使用者體驗非常糟糕。此時我們可以採用debounce（防抖）和throttle（節流）的方式來減少呼叫頻率，同時又不影響實際效果。
函式防抖（debounce）：
當持續觸發事件時，一定時間段內沒有再觸發事件，事件處理函式才會執行一次，如果設定的時間到來之前，又一次觸發了事件，就重新開始延時。如下圖，持續觸發scroll事件時，並不執行handle函式，當1000毫秒內沒有觸發scroll事件時，才會延時觸發scroll事件。
在第一次觸發事件時，不立即執行函式，而是給出乙個期限值比如200ms，然後：
效果：如果短時間內大量觸發同一事件，只會執行一次函式。
實現：函式防抖的基本思想是設定乙個定時器，在指定時間間隔內執行**時清楚上一次的定時器，並設定另乙個定時器，知道函式請求停止並超過時間間隔才會執行。，由於還需要乙個變數來儲存計時，考慮維護全域性純淨，可以借助閉包來實現。
使用場景:
文字框輸入搜尋（連續輸入時避免多次請求介面）
防抖debounce**：
/**
* 防抖函式
* @param fn 要執行的函式
* @param delay 延遲執行的毫秒數，預設是200毫秒
* @return 防抖函式
*/function debounce(fn, delay)
timer = settimeout(function() , delay);}}
// 防抖函式 es6寫法
const debounce = (fn, delay=200) =>
timer = settimeout(() => , delay);
}} // 處理函式
function handle(str)
// 監聽input輸入change事件
// 注意：如果防抖的函式不需要引數的話，可以使用第一種寫法防抖，如果需要防抖的函式還需要傳入引數，請使用第二種寫法。
//防抖第一種寫法：
$('input').on('input',debounce(handle,2000));
//防抖第二種寫法：
var debounced = debounce(handle,2000);
$('input').on('input',function());
函式節流（throttle）：
當持續觸發事件時，保證一定時間段內只呼叫一次事件處理函式。規定在乙個單位時間內，只能觸發一次函式，如果這個單位時間內觸發多次函式，只有一次生效； 典型的案例就是滑鼠不斷點選觸發，規定在n秒內多次點選只有一次生效。
效果：如果短時間內大量觸發同一事件，那麼在函式執行一次之後，該函式在指定的時間期限內不再工作，直至過了這段時間才重新生效。
實現原理：
其原理是用時間戳來判斷是否已到**該執行時間，記錄上次執行的時間戳，然後每次觸發 scroll 事件執行**，**中判斷當前時間戳距離上次執行時間戳的間隔是否已經到達 規定時間段，如果是，則執行，並更新上次執行的時間戳，
使用場景
resize、scroll、mousemove等事件觸發監聽
節流throttle**：
/**
* 配置節流函式
* @param fn 要執行的函式
* @param delay 延遲執行的毫秒數，預設是200毫秒
* @return 節流函式
*/function throttle(fn, delay) , delay);
} else }}
// 節流函式 es6寫法
const throttle = (fn, delay=200) => , delay);
} else
}} // 處理函式
function handle(id)
// 監聽window的scroll事件
// 注意：如果節流的函式不需要引數的話，可以使用第一種寫法節流，如果需要節流的函式還需要傳入引數，請使用第二種寫法。
//防抖第一種寫法：
$(window).on('scroll',throttle(handle, 3000));
//防抖第二種寫法：
var throttled = throttle(aa,2000);
$(window).on('scroll', function());
函式節流（throttle）：使得一定時間內只觸發一次函式。原理是通過判斷是否到達一定時間來觸發函式。
區別： 函式節流不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函式，而函式防抖只是在最後一次事件後才觸發一次函式。 比如在頁面的無限載入場景下，我們需要使用者在滾動頁面時，每隔一段時間發一次 ajax 請求，而不是在使用者停下滾動頁面操作時才去請求資料。這樣的場景，就適合用節流技術來實現。
防抖與節流方案 函式防抖和節流
在前端開發的過程中，我們經常會需要繫結一些持續觸發的事件，如 resize scroll mousemove 等等，但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁地去執行函式。通常這種情況下我們怎麼去解決的呢？一般來講，防抖和節流是比較好的解決方案。讓我們先來看看在事件持續觸發的過程中頻繁執行...
函式防抖與節流
因為在寫前端頁面時需要監控滑鼠滾輪，這導致在很短時間內，會觸發很多次函式，造成頁面卡頓堵塞，正巧自己在看github時看到了這個，所以自己記錄一下。函式防抖就是讓某個函式在上一次執行後，滿足等待某個時間內不再觸發此函式後再執行，而在這個等待時間內再次觸發此函式，等待時間會重新計算。underscor...
函式防抖與節流
在前端開發的過程中，我們經常會需要繫結一些持續觸發的事件，如 resize scroll mousemove 等等，但在事件持續觸發期間頻繁的執行函式在很大程度上造成了不必要的浪費。通常這種情況下我們一般使用防抖和節流是這兩種解決方案。讓我們先來看看在事件持續觸發的過程中頻繁執行函式是怎樣的一種情況...