本文深入解析JavaScript中节流与防抖的核心概念、区别及实现方式。通过时间戳与定时器两种方案，详细演示如何限制高频事件触发频率，降低接口压力并提升页面性能。文章包含基础版与升级版代码示例，帮助开发者根据实际需求选择合适的优化策略。
JavaScript节流与防抖机制概述
背景：当高频请求资源或接口时，会导致DOM操作频繁、接口负载过高及性能降低。例如搜索时快速回车或网络不佳时重复点击下一页，均会加剧服务器压力。
为防止同一事件或请求被频繁触发，需引入节流与防抖策略。
概念辨析：初闻此名易误解为节省流量或防止手抖，实则为控制事件触发频率的技术方案。
核心概念
定义：节流与防抖旨在限制短时间内事件的多次触发，通过减少请求频次来降低系统压力并提升性能。
两者区别
节流：在指定时间间隔内仅允许执行一次请求。
类比：如公交车固定班次，每次点击视为乘客，每十分钟发一班车（执行一次请求）。
防抖：事件触发后延迟n秒执行，若n秒内再次触发则重置计时器。
场景：持续点击按钮时，仅以最后一次点击为准发送请求。
节流实现方案
实现思路：
基于时间戳：记录当前时间与上次执行时间的差值。
判断逻辑：当前时间减去上次执行时间大于设定阈值时，执行函数。
局限性：首次触发立即执行，但最后一次触发后在设定时间内无法再次触发。
场景示例：搜索数据时未加处理会导致请求过于频繁。
节流函数代码
代码示例：
<body>
<div>
<span>节流处理</span><input id="input" type="text">
<button id="btn">请求</button>
</div>
</body>
<script>
var btn = document.getElementById("btn")
btn.addEventListener("click", throttle(output, 1000)) //添加点击事件监听
function output(e) {
console.log(this, e)
console.log(document.getElementById("input").value) //模拟发起一次请求
}
//节流函数
function throttle(fn, delay) { // fn为执行的函数，delay为延迟时间
var last = 0; //上一次结束的时间
return function () {
var cur = Date.now()
console.log(cur-last)
if (cur - last > delay) {
fn.apply(this, arguments) //执行函数
last = cur //更新上一次时间
}
}
}
</script>
运行效果：
防抖实现方案
实现思路：
基于定时器：在定时结束时执行。局限性：首次不触发，最后一次延迟触发。
逻辑：设置定时器，若持续点击则清除定时器，仅在最后一次点击后开启定时器。
防抖函数代码
代码示例：
<body>
<div>
<span>防抖处理</span><input id="input" type="text">
<button id="btn">请求</button>
</div>
</body>
<script>
var btn = document.getElementById("btn")
btn.addEventListener("click", debounce(output, 1000)) //添加点击事件监听
function output(e) {
console.log(this, e)
console.log(document.getElementById("input").value) //模拟发起一次请求
}
function debounce(fn, delay) { // fn为执行的函数，delay为延迟时间
var time = null; //定时器
return function () {
clearTimeout(time); //清除定时器
let context = this; //获取当前button上下文 如果不指定，箭头函数就会一直往外找到window
let args = arguments;
time = setTimeout(() => {
fn.apply(context, args);
}, delay);
}
}
</script>
运行效果：
防抖升级版
特性：兼顾首次立即触发与最后一次延迟触发。
代码示例：
function throttle(fn, delay) { // fn为执行的函数，delay为延迟时间
let time = null
let flag=true //标识是不是第一次触发
return function () {
clearTimeout(time)
if (flag) {
fn.apply(this, arguments)
flag=false
}
time = setTimeout(() => { //触发定时器
fn.apply(this, arguments)
flag=true
}, delay)
}
}
运行效果：
总结
本文旨在提供技术参考，欢迎持续关注本站更多内容。
JavaScript节流与防抖机制概述
背景：当高频请求资源或接口时，会导致DOM操作频繁、接口负载过高及性能降低。例如搜索时快速回车或网络不佳时重复点击下一页，均会加剧服务器压力。
为防止同一事件或请求被频繁触发，需引入节流与防抖策略。
概念辨析：初闻此名易误解为节省流量或防止手抖，实则为控制事件触发频率的技术方案。
核心概念
定义：节流与防抖旨在限制短时间内事件的多次触发，通过减少请求频次来降低系统压力并提升性能。
两者区别
节流：在指定时间间隔内仅允许执行一次请求。
类比：如公交车固定班次，每次点击视为乘客，每十分钟发一班车（执行一次请求）。
防抖：事件触发后延迟n秒执行，若n秒内再次触发则重置计时器。
场景：持续点击按钮时，仅以最后一次点击为准发送请求。
节流实现方案
实现思路：
基于时间戳：记录当前时间与上次执行时间的差值。
判断逻辑：当前时间减去上次执行时间大于设定阈值时，执行函数。
局限性：首次触发立即执行，但最后一次触发后在设定时间内无法再次触发。
场景示例：搜索数据时未加处理会导致请求过于频繁。
节流函数代码
代码示例：
<body>
<div>
<span>节流处理</span><input id="input" type="text">
<button id="btn">请求</button>
</div>
</body>
<script>
var btn = document.getElementById("btn")
btn.addEventListener("click", throttle(output, 1000)) //添加点击事件监听
function output(e) {
console.log(this, e)
console.log(document.getElementById("input").value) //模拟发起一次请求
}
//节流函数
function throttle(fn, delay) { // fn为执行的函数，delay为延迟时间
var last = 0; //上一次结束的时间
return function () {
var cur = Date.now()
console.log(cur-last)
if (cur - last > delay) {
fn.apply(this, arguments) //执行函数
last = cur //更新上一次时间
}
}
}
</script>
运行效果：
防抖实现方案
实现思路：
基于定时器：在定时结束时执行。局限性：首次不触发，最后一次延迟触发。
逻辑：设置定时器，若持续点击则清除定时器，仅在最后一次点击后开启定时器。
防抖函数代码
代码示例：
<body>
<div>
<span>防抖处理</span><input id="input" type="text">
<button id="btn">请求</button>
</div>
</body>
<script>
var btn = document.getElementById("btn")
btn.addEventListener("click", debounce(output, 1000)) //添加点击事件监听
function output(e) {
console.log(this, e)
console.log(document.getElementById("input").value) //模拟发起一次请求
}
function debounce(fn, delay) { // fn为执行的函数，delay为延迟时间
var time = null; //定时器
return function () {
clearTimeout(time); //清除定时器
let context = this; //获取当前button上下文 如果不指定，箭头函数就会一直往外找到window
let args = arguments;
time = setTimeout(() => {
fn.apply(context, args);
}, delay);
}
}
</script>
运行效果：
防抖升级版
特性：兼顾首次立即触发与最后一次延迟触发。
代码示例：
function throttle(fn, delay) { // fn为执行的函数，delay为延迟时间
let time = null
let flag=true //标识是不是第一次触发
return function () {
clearTimeout(time)
if (flag) {
fn.apply(this, arguments)
flag=false
}
time = setTimeout(() => { //触发定时器
fn.apply(this, arguments)
flag=true
}, delay)
}
}
运行效果：
总结
本文旨在提供技术参考，欢迎持续关注本站更多内容。