一、定义与概念
节流（Throttle）是一种在事件频繁触发场景下，限制函数执行频率的策略。与防抖不同的是，节流确保在一定时间间隔内，函数最多只执行一次。不管在这个时间间隔内事件触发了多少次，函数都按照固定的频率执行。
二、工作原理
节流主要有两种实现方式：时间戳方式和定时器方式。
1. 时间戳方式
通过记录上一次函数执行的时间戳，在事件触发时，判断当前时间与上一次执行时间的间隔是否大于设定的节流时间间隔。如果大于，则执行函数，并更新上一次执行时间；如果小于，则忽略此次事件触发。
function throttle(func, delay) {let prev = 0;return function () {let now = Date.now();if (now - prev >= delay) {func.apply(this, arguments);prev = now;}};}2. 定时器方式
利用定时器来控制函数的执行。当事件首次触发时，设置一个定时器，在定时器延迟时间内，再次触发事件时，忽略该事件。当定时器到期后，执行函数，并重新设置定时器。
function throttle(func, delay) {let timer;return function () {if (!timer) {func.apply(this, arguments);timer = setTimeout(() => {timer = null;}, delay);}};}三、应用场景
1. 页面滚动（scroll）事件
当用户滚动页面时，`scroll`事件会频繁触发。如果在`scroll`事件中执行复杂的计算（如计算元素是否进入视口、更新页面布局等），会消耗大量性能。通过节流，可以每隔一段时间（如 100 毫秒）执行一次这些计算，既能保证一定的实时性，又能避免性能问题。
const throttledScroll = throttle(() => {// 计算元素是否进入视口或者更新页面布局等操作console.log("执行滚动相关操作");}, 100);window.addEventListener("scroll", throttledScroll);2. 鼠标移动（mousemove）事件
在一些需要跟踪鼠标位置的场景下，如鼠标跟随效果、绘制图形等，`mousemove`事件会频繁触发。使用节流可以限制鼠标移动事件处理函数的执行频率，避免过度消耗资源。
const canvas = document.getElementById("drawing - canvas");const throttledMouseMove = throttle((e) => {const x = e.clientX;const y = e.clientY;// 在画布上绘制或者更新鼠标跟随效果等操作console.log("鼠标位置：", x, y);}, 50);canvas.addEventListener("mousemove", throttledMouseMove);3. 拖拽（drag）事件
在拖拽元素的过程中，`drag`事件会频繁触发。通过节流可以控制在拖拽过程中更新元素位置等操作的频率，使拖拽过程更加平滑，同时避免性能问题。
const draggableElement = document.getElementById("draggable - element");const throttledDrag = throttle((e) => {const left = e.clientX;const top = e.clientY;draggableElement.style.left = left + "px";draggableElement.style.top = top + "px";}, 80);draggableElement.addEventListener("drag", throttledDrag);