[toc] #### 1.防抖 防抖：連續點擊按鈕，只觸發最后一次事件 實現思路：設置一個公共的定時器，每次觸發事件時，先清除該定時器，然后再生成一個，這樣只會有最后一個定時器觸發 ```js const btn = document.getElementById('btn') btn.addEventListener('click', debounce(payMoney, 1000)) function payMoney(a) { console.log(a); } function debounce(func, delay) { let timer return function() { clearTimeout(timer) let context = this let args = arguments timer = setTimeout(() => { func.call(context, args) }, delay) } } ``` #### 2.節流 節流：在連續執行時間時，使事件在相同時間間隔內執行 方法1： 1.根據 setTimeout，延遲 func 執行時間為 delay 2.每次執行完后清除 timer，如果timer存在，則不執行， 該方法與防抖的區別在于，防抖每次馬上清除掉上一次的timer，不管有沒有執行，只執行最后一次，而節流在timer存在時不執行，等到方法執行完畢后再清楚timer ```js function throttle(func, delay) { let timer return function() { let context = this let args = arguments if (timer) { return } else { timer = setTimeout(() => { func.call(context, args) timer = null }, delay) } } } ``` 方法2：根據時間間隔發，記錄上一次執行的時間 用當前時間減去上一次的時間，如果大于設置的delay，那么執行 func，并且刷新上一次的時間為now ```js function throttle(func, delay) { let pre = 0 return function () { let now = new Date() let context = this let args = arguments if (now - pre > delay) { func.apply(context, arguments) pre = now } } }