一、节流是什么节流持续触发事件时保证在一定时间间隔内只执行一次函数。生活例子地铁闸机不管进来多少人每过一个人就要等一小会儿才能过下一个固定频率放行。游戏攻击冷却按得再快技能也是固定2秒才能发一次。二、为什么需要节流假设项目里有一个滚动加载更多的功能用户疯狂滚动鼠标如果不做限制每秒可能触发几百次请求页面卡死。节流保证了滚动过程中每 500ms 才检查一次是否需要加载下一页既保证流畅又不会压垮服务器。三、节流的原理核心就是记录上一次执行的时间如果当前时间还没到间隔就忽略这次触发。时间戳版首次立即执行停止后不再执行function throttle(fn, delay) { let lastTime 0; return function (...args) { const now Date.now(); if (now - lastTime delay) { fn.apply(this, args); lastTime now; } }; }定时器版停止后还会执行最后一次function throttle(fn, delay) { let timer null; return function (...args) { if (timer) return; // 有定时器说明还没到时间忽略 timer setTimeout(() { fn.apply(this, args); timer null; // 执行完后清空下一次才可以进 }, delay); }; }两种区别时间戳版首调用立即执行停止后不执行。定时器版首调用延迟delay后执行停止后会再执行一次。实际项目里可根据需要组合。四、在 Vue 组件中使用// utils/throttle.js export function throttle(fn, delay 300) { let timer null; return function (...args) { if (timer) return; timer setTimeout(() { fn.apply(this, args); timer null; }, delay); }; }组件中import { throttle } from /utils/throttle; export default { methods: { // 节流后的滚动处理 handleScroll: throttle(function () { console.log(滚动位置:, window.scrollY); // 这里做滚动加载等操作 }, 500) }, mounted() { window.addEventListener(scroll, this.handleScroll); }, beforeDestroy() { window.removeEventListener(scroll, this.handleScroll); } };五、节流 vs 防抖防抖 (Debounce)节流 (Throttle)策略动作停下后才执行一次动作期间每隔一段时间执行一次结果把多次合并为最后一次/第一次把多次稀释成固定频率典型场景搜索框输入、窗口resize结束滚动事件、鼠标移动、进度条想等用户消停了再处理→ 防抖想在操作过程中规律地处理→ 节流七、总结防抖输入框搜索、按钮防连点需要等停止动作。节流滚动、鼠标移动、进度条更新、自动保存需要固定频率执行。