防抖（debounce）和節流（throttle）都是用來控制某個函式在一定時間內執行多少次的技巧，兩者相似而又不同。 背後的基本思想是某些**不可以在沒有間斷的情況下連續重複執行。
如果乙個事件被頻繁觸發多次，並且觸發的時間間隔過短，則防抖函式可以使得對應的事件處理函式只執行最後觸發的一次。 函式防抖可以把多個順序的呼叫合併成一次。
如果乙個事件被頻繁觸發多次，節流函式可以按照固定頻率去執行對應的事件處理方法。 函式節流保證乙個事件一定時間內只執行一次。型別
場景函式防抖
1. 手機號、郵箱輸入檢測
2. 搜尋框搜尋輸入（只需最後一次輸入完後，再放鬆ajax請求）
3. 視窗大小resize（只需視窗調整完成後，計算視窗大小，防止重複渲染）
4.滾動事件scroll（只需執行觸發的最後一次滾動事件的處理程式）
5. 文字輸入的驗證（連續輸入文字後傳送 ajax 請求進行驗證，（停止輸入後）驗證一次就好
函式節流
1.dom元素的拖拽功能實現（mousemove）
2. 射擊遊戲的mousedown/keydown事件（單位時間只能發射一顆子彈）
3. 計算滑鼠移動的距離（mousemove）
4. 搜尋聯想（keyup）
5. 滾動事件scroll，（只要頁面滾動就會間隔一段時間判斷一次）
function debounce(fn, delay, scope) , delay);
}}複製**
第一次呼叫函式，建立乙個定時器，在指定的時間間隔之後執行**；4.2.1 利用時間戳簡單實現當第二次呼叫該函式時，它會清除前一次的定時器並設定另乙個；
如果前乙個定時器已經執行過了，這個操作就沒有任何意義；
然而，如果前乙個定時器尚未執行，其實就是將其替換為乙個新的定時器；
目的是只有在執行函式的請求停止了
delay時間之後才執行。
function throttle(fn, threshold, scope)
}}複製**
function throttle2(fn, threshold, scope) , threshold);}}
}複製**
.wrap
.header
.container
.content
複製**
滾動事件：普通
滾動事件:加了函式防抖
滾動事件:加了函式節流
複製**
let els = document.getelementsbyclassname('container');
let count1 = 0,count2 = 0,count3 = 0;
const threshold = 200;
els[0].addeventlistener('scroll', function handle() );
els[1].addeventlistener('scroll', debounce(function handle() , threshold));
els[2].addeventlistener('scroll', throttle(function handle() , threshold));
複製**
// 函式防抖
function debounce(fn, delay, scope) , delay);
}}複製**
// 函式節流
function throttle(fn, threshold, scope)
}}複製**
js函式防抖和函式節流
函式防抖 就是指觸發事件後在 n 秒內函式只能執行一次，如果在 n 秒內又觸發了事件，則會重新計算函式執行時間。在頻繁觸發的情況下，只有在停止觸發的時候才會執行 函式節流 限制乙個函式在一定時間內只能執行一次。目的 函式防抖和函式節流都是用來優化高頻率執行js 的手段 簡而言之就是在一定時間內，把高...
JS 函式防抖和函式節流
所謂防抖，就是指觸發事件後在 n 秒內函式只能執行一次，如果在 n 秒內又觸發了事件，則會重新計算函式執行時間。function debounce func,wait wait if callnow func.context,args 所謂節流，就是指連續觸發事件但是在 n 秒中只執行一次函式。節流...
js函式防抖和函式節流
js函式防抖和函式節流函式 函式防抖 debounce.js 就是指觸發事件後在 n 秒內函式只能執行一次，如果在 n 秒內又觸發了事件，則會重新計算函式執行時間。函式節流 throttle.js 就是指連續觸發事件但是在 n 秒中只執行一次函式。debounce.js 函式防抖 函式被頻繁呼叫時使...