在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。 通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。 节流 如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。 function throttle(fn, delay,...arguments) { let prev = Date.now() let args = [...arguments] return function () { let cur = Date.now() if (cur - prev >= delay) { fn.call(this, ...args) prev = Date.now() } } } //demo function fn(n) { console.log(n) } addEventListener('scroll', throttle(fn,1000,1)) 防抖 在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms，然后： 如果在200ms内没有再次触发滚动事件，那么就执行函数 如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时 效果：如果短时间内大量触发同一事件，只会执行一次函数。 function debounce(fn, delay, ...arguments) { let timer = null let args = [...arguments] return function () {l clearTimeout(timer) timer = setTimeout(() => { fn.call(this, ...args) }, delay) } } //demo function fn(n) { console.log(n) } addEventListener('scroll', debounce(fn, 1000,2))