JavaScript中函数的防抖与节流详解
本文详细解析JavaScript中函数节流与防抖的核心概念及实现方式。通过滚动事件和输入框事件的实际案例，演示如何利用标志位实现节流以限制执行频率，以及利用定时器实现防抖以执行最后一次请求。旨在帮助开发者理解两者区别并应用于前端性能优化场景。
一、函数的节流
1.1 定义
当同一事件被频繁触发且执行相同逻辑时，若业务需求仅允许执行首次请求，则需采用节流机制。
以鼠标滚动（scroll）事件为例，快速滚动时该事件会高频触发，但通常只需响应其中一次操作即可。
1.2 解决方法
实现节流的核心思路类似于设置一个开关状态。定义一个状态变量并赋予初始默认值，在函数执行前检查该变量的值：若为初始状态，则更新变量为新状态并继续执行后续逻辑；若已非初始状态，则直接返回（return），终止后续代码执行，从而控制频率。
1.3 案例演示
首先构建一个监听窗口滚动事件的示例场景。
1.3 .1 代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
//设置高度让页面显示滚动条
height: 4000px;
}
</style>
</head>
<body>
<script>
// 创建窗口监听事件
window.addEventListener("scroll",function(){
fun();
})
// 随便写一个后台输出函数
function fun(){
console.log(666);
console.log(888);
}
</script>
</body>
</html>1.3 .2 运行结果
观察运行结果可知，尽管用户仅拨动了一次鼠标滚轮，但由于事件高频触发，关联的函数被执行了多次。
函数节流的目标正是解决此问题：确保在滚动过程中，无论触发多少次事件，函数仅执行一次，并在后台输出一次对应结果。
1.3 .3 添加函数节流操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 4000px;
}
</style>
</head>
<body>
<script>
// 创建窗口监听事件
// 存储一个默认值为true
let flag = true ;
// 窗口监听事件
window.addEventListener("scroll",function(){
if( flag ){
flag = false ;
}else{
return ;
}
fun();
})
// 随便写一个后台输出函数
function fun(){
// document.write('已经到达1000px的上卷高度了')
console.log(666);
}
</script>
</body>
</html>1.3 .4 运行结果
二、函数的防抖
2.1 定义
当同一事件被频繁触发且每次执行可能产生不同结果时，若业务需求仅允许执行最后一次请求，则需采用防抖机制。
2.2 解决方法
实现防抖主要依赖定时器（setTimeout）。核心逻辑为：在每次触发时先清除之前设定的定时器，然后重新定义一个新的定时器来延迟执行函数。只有当最后一次触发后经过指定时间间隔且无新触发时，函数才会真正执行。
2.3 案例演示
此处以输入框（input）的输入事件为例进行演示。
2.3.1 代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<script>
// 获取标签
const oIpt = document.querySelector('input');
// input输入事件监听
oIpt.addEventListener('input',function(){
console.log(`您输入了${oIpt.value.length}个字`);
})
</script>
</body>
</html>2.3.2 运行结果
在示例中判断输入字符串的长度，可以看到控制台输出结果随输入字符数变化（如1-5个字符），但当最后输入中文时，长度又变回2个字符。防抖操作的目的在于：无论中间过程如何变化，最终只执行最后一次输入完成后的操作，即仅输出最后一个完整字符串（如“你好”）的长度。
简而言之，防抖确保在多次快速触发请求时，只有最后一次触发会被实际执行。
2.3.3 添加函数防抖操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<script>
// 获取标签
const oIpt = document.querySelector('input');
// input输入事件监听
oIpt.addEventListener('input',function(){
// 先清除定时器
clearInterval( time );
// 定义延时器 延迟执行 函数程序
time = setTimeout( function(){
// 延时器 延迟一秒 执行程序
setPage() ;
} , 2000 );
})
function setPage(){
console.log(`您输入了${oIpt.value.length}个字`);
}
</script>
</body>
</html>2.3.4 运行结果
总结
本文到此结束，希望上述内容能为您提供帮助。欢迎继续关注本站以获取更多技术分享！
什么时候该用JS构造器：与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选？场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38