[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 } } }