### 防抖、节流 开发中经常会有一些持续触发的事件，比如scroll、resize、mousemove、input等。频繁的执行回调，不仅对性能有很大影响，甚至会有相应跟不上，造成页面卡死等现象。 针对这种问题有两种解决方案，防抖和节流。 #### 防抖 事件触发后的time时间内只执行一次。原理是维护一个延时器，规定在time时间后执行函数，如果在time时间内再次触发，则取消之前的延时器重新设置。所以回调只在最后执行一次。 ~~~js function debounce(func, time = 0) { if (typeof func !== 'function') { throw new TypeError('Expect a function') } let timer return function () { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { func() }, time) } } ~~~ #### 节流 在事件触发过程中，每隔wait执行一次回调。 可选参数三 `trailing`，事件第一次触发是否执行一次回调。默认true，即第一次触发先执行一次。 ~~~js function throttle(func, wait = 0, trailing = true) { if (typeof func !== 'function') { throw new TypeError('Expected a function') } let timer let start = +new Date return function (...rest) { let now = +new Date if (timer) { clearTimeout(timer) } if (now - start >= wait || trailing) { func.apply(this, rest) start = now trailing = false } else { timer = setTimeout(() => { func(...rest) }, wait) } } } ~~~ **区别：** 不管事件触发有多频繁，节流都会保证在规定时间内一定会执行一次真正的事件处理函数，而防抖只是在最后一次事件触发后才执行一次函数。 **场景：** 防抖：比如监听页面滚动，滚动结束并且到达一定距离时显示返回顶部按钮，适合使用防抖。 节流：比如在页面的无限加载场景下，需要用户在滚动页面时过程中，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。此场景适合用节流来实现。 ## 来自 链接：https://www.jianshu.com/p/919eeda7152f