[TOC] #### 1. 节流介绍 --- JS 是事件驱动的，大量的操作会触发事件，加入到事件队列中处理。 而对于某些频繁的事件处理会造成性能的损耗，我们就可以通过防抖和节流来限制事件的频繁发生。 节流: n 秒内只运行一次，若在 n 秒内重复触发，只有第一次生效 节流的应用场景: 1\. 滚动加载: 监听页面滚动到底部的时候触发 2\. 拖拽场景: 固定时间只执行一次，防止高频率的位置变动 #### 2. 滚动加载-节流处理 --- 首先编写监听页面滚动距离的方法，当向下滑动时，可以看到控制台执行了很多次的输出，如果我们要根据页面滑动距离来计算代码逻辑，这样频繁的执行计算会非常损耗系统性能，我们可以使用节流来优化这个问题 ``` <style> body { height: 2000px; background: lightsalmon; } </style> <script> let count = 1 function scrollFn() { console.log('监听页面滚动次数: ', count++); } document.onscroll = scrollFn </script> ``` 节流的实现思路: 1\. 借助 setTimeout 定时器，控制事件回调是否执行 2\. 获取每次事件执行的时间与上一次执行的时间差 3\. 判断时间差是否已超过设定的时间间隔，超过时立即执行函数，没有超过时取消后续的定时器任务 4\. 最后一次事件的触发，会执行完成 使用节流函数优化后的代码: ```javascript // 节流函数 function throttle(fn, time) { // 上一次的执行时间 let pre = 0 let timeout = null return function (...args) { const now = Date.now() // 时间差超过了设定的时间间隔 if (now - pre > time) { pre = now fn.apply(this, args) } else { // 没有超过设定的时间间隔,则后续的事件会直接清除 if (timeout) { clearTimeout(timeout) timeout = null } // 最后一次的事件会触发 timeout = setTimeout(() => { pre = now fn.apply(this, args) }, time); } } } document.onscroll = throttle(scrollFn, 300) ```