节流是什么？
在前端开发或编程领域中，“节流”（Throttling） 是一种控制函数执行频率的技术。它用于限制某个函数在一定时间范围内只能执行一次，无论这个时间段内触发了多少次。
🎯 节流（Throttling）的定义
节流是指：确保一个函数在指定的时间间隔内只执行一次，即使它被多次调用，也只有在超过这个时间间隔后才会再次执行。
💡 典型应用场景：
- 窗口调整（resize）
- 滚动事件（scroll）
- 鼠标移动（mousemove）
- 输入框实时搜索（结合防抖更佳）
🧠 实现原理简述：
使用一个标志变量和 setTimeout 或 Date.now() 来记录上一次执行的时间，并判断是否已经过了设定的时间间隔（如 500ms），如果是，才允许执行函数。
✅ 示例代码（JavaScript）：
<input type="text" id="inputC" />
<script>
let inputC = document.getElementById('inputC');
const ajax = function (content) { // 被节流的函数
// fetch
// XMLHttpRequest
console.log('ajax request ' + content)
}
function throttle(fn, delay) {
let last, // 上一次的执行时间
deferTimer; // timeout id
return function (args) {
let that = this; // 闭包的应用场景
let now = +new Date(); // 类型转换
let args = arguments;
if (last && now < last + delay) {
clearTimeout(deferTimer);
deferTimer = setTimeout(function () {
last = now;
fn.call(that, args)
}, delay)
} else {
last = now;
fn.call(that, args);
}
}
}
let throttleAjax = throttle(ajax, 2000);
inputC.addEventListener('keyup', function (e) {
throttleAjax(e.target.value);
})
</script>
大家看到上面的代码是否会比较懵逼呢，莫慌撒，让我来带着大家解读一下上述代码的每一段内容。
1.模拟AJAX请求的函数,接收内容参数并打印请求信息
function ajax(content) {
console.log('ajax request ' + content)
}
2.定义节流函数，接收原函数和延迟时间
function throttle(fn, delay) {
let last, // 上一次的执行时间
deferTimer; // timeout id
return function (args) {
let that = this; // 闭包的应用场景
let now = +new Date(); // 类型转换
// let args = arguments;
声明deferTimer变量，用于存储定时器ID;获取当前时间戳（+new Date()将Date对象转换为数字）
3.节流逻辑判断
//判断是否在节流时间内（距离上次执行未超过delay）
if (last && now < last + delay) {
//如果在节流时间内，清除之前的定时器
clearTimeout(deferTimer);
//设置新的定时器，延迟执行函数
deferTimer = setTimeout(function () {
last = now;
fn.call(that, args)
}, delay)
} else {
last = now;
fn.call(that, args);
}
使用call方法调用原函数，传递单个参数,如果不在节流时间内，立即执行函数并更新时间
节流机制说明
- 首次调用：立即执行，记录执行时间
- 节流期间调用：延迟执行，确保至少间隔2000ms
- 节流期外调用：立即执行，更新执行时间
这样就实现了节流效果：确保函数在指定时间间隔内最多执行一次，控制执行频率。
使用示例：
window.addEventListener('resize', throttle(() => {
console.log('窗口大小改变了');
}, 500));
这段代码的意思是：窗口每次 resize 时都会触发事件，但只有距离上次执行超过 500ms 才会真正执行一次 console.log。
🔁 和防抖的区别：
| 特性 | 防抖（Debounce） | 节流（Throttle） |
|---|---|---|
| 原理 | 在事件被触发后，等待一段时间，如果没再触发才执行 | 确保 n 秒内只执行一次 |
| 应用场景 | 输入框搜索、自动保存 | 窗口调整、滚动监听 |
| 特点 | 只有停止触发后才执行一次 | 按固定频率执行 |
✅ 总结一句话：
节流就是控制函数执行的频率，让其每隔一段时间才执行一次，避免过于频繁地触发。
