本文深入解析JavaScript中防抖（debounce）与节流（throttle）的核心原理。通过对比两者在高频事件触发下的不同表现，结合输入框搜索建议、鼠标跟随等实际案例，详细展示了基于定时器、缓存对象及节流阀的具体实现方式，旨在帮助开发者有效优化前端性能，降低服务器压力与CPU资源消耗。
1. 防抖机制定义
【原理】：防抖（debounce）指事件触发后延迟 n 秒执行回调，若 n 秒内再次触发则重置计时器。
【示意图】：
【核心价值】：
用户高频触发事件时，仅执行最后一次请求，以节省网络资源。
【输入框防抖实现】：
var timer = null // 1. 防抖动的 timer
function debounceSearch(keywords) { // 2. 定义防抖的函数
timer = setTimeout(function() {
// 发起 JSONP 请求
getSuggestList(keywords)
}, 500)
}
$('#ipt').on('keyup', function() { // 3. 在触发 keyup 事件时，立即清空 timer
clearTimeout(timer)
// ...省略其他代码
debounceSearch(keywords)
})
【建议框缓存机制】：
声明全局缓存对象
// 缓存对象
var cacheObj = {}
将查询结果存储至缓存对象
// 渲染建议列表
function renderSuggestList(res) {
// ...省略其他代码
// 将搜索的结果，添加到缓存对象中
var k = $('#ipt').val().trim()
cacheObj[k] = res
}
优先从缓存读取搜索建议
// 监听文本框的 keyup 事件
$('#ipt').on('keyup', function() {
// ...省略其他代码
// 优先从缓存中获取搜索建议
if (cacheObj[keywords]) {
return renderSuggestList(cacheObj[keywords])
}
// 获取搜索建议列表
debounceSearch(keywords)
})
2、节流机制定义
【原理】：限制单位时间内事件触发的频率，即节流策略。
【示意图】：
【应用场景】
- 鼠标连续触发事件（如点击），确保单位时间内仅执行一次；
- 懒加载监听滚动位置时，无需每次滑动都触发，可降低计算频率，避免浪费 CPU 资源；
【鼠标跟随案例】：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/jquery.js"></script>
<style>
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#angel {
position: absolute;
}
</style>
</head>
<body>
<img src="./angel.gif" alt="" id="angel" />
<script>
$(function () {
// 获取图片元素
var angel = $('#angel')
// 绑定鼠标移动事件
$(document).on('mousemove', function (e) {
// 获取鼠标到x和y轴的距离设置给图片的高和左
$(angel).css('top', e.pageY-40 + 'px').css('left', e.pageX-40 + 'px')
})
})
</script>
</body>
</html>
3、节流阀机制
【原理】：
- 节流阀为空时，允许执行下一次操作；非空时，禁止执行。
- 当前操作完成后，必须重置节流阀为空，以允许后续操作。
- 每次执行前，需校验节流阀状态是否为空。
【节流优化应用】：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/jquery.js"></script>
<style>
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#angel {
position: absolute;
}
</style>
</head>
<body>
<img src="./angel.gif" alt="" id="angel" />
<script>
$(function () {
// 定义一个节流阀
var timer = null;
// 获取图片元素
var angel = $('#angel')
// 绑定鼠标移动事件
$(document).on('mousemove', function (e) {
// 判断节流阀是否为空
if (timer) return
// 控制节流阀的时间
timer = setTimeout(function () {
// 获取鼠标到x和y轴的距离设置给图片的高和左
$(angel).css('top', e.pageY - 40 + 'px').css('left', e.pageX - 40 + 'px')
// 清空节流阀
timer = null
}, 100)
})
})
</script>
</body>
</html>
总结
本文到此结束，希望能提供有益帮助，欢迎持续关注本站更多内容！