当前位置：首页 > news >正文

JavaScript-防抖与节流

news 2025/10/9 7:50:29

防抖与节流是前端开发中常用的两种性能优化技术，主要用于控制高频率事件的触发，避免因事件触发过于频繁而导致页面卡顿、资源浪费或逻辑错误。防抖（Debounce）可以确保在一段时间内只执行最后一次操作，常用于输入框实时搜索、窗口大小调整等场景；节流（Throttle）则保证在一定时间间隔内只执行一次操作，适用于滚动监听、按钮防连点等需求。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=<device-width>, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>防抖与节流</h1><button id="btn" onclick="handleClick()">点击我（防抖）</button><button id="btn" onclick="testClick()">点击我</button><button id="btn" onclick="handleClick2()">点击我（节流）</button><script>// 防抖: 一段时间内, 只执行最后一次function Debounce(func, delay) {let timer = null;context = this;return function(...args){clearTimeout(timer);timer = setTimeout(() =>{func.apply(context,args);},delay);}}// 节流: 一段时间内, 只执行一次function Throttle(func, delay) {let lastTime = 0;context = this;return function(...args){let nowTime = Date.now();if(nowTime - lastTime > delay){func.apply(context,args);lastTime = nowTime;}}}function testClick() {console.log("按钮被点击了");}const btn = document.getElementById("btn");handleClick = Debounce(testClick, 1000);handleClick2 = Throttle(testClick, 1000);</script>
</body>
</html>

本文件通过简单的按钮点击示例，分别实现了防抖和节流的核心逻辑，并通过控制台输出演示了它们的效果，帮助理解两者的区别和实际应用场景。

查看全文

http://www.dtcms.com/a/457578.html