在JavaScript中实现防抖和节流的方法详解
更新时间：2026年03月26日 08:56:13 作者：用户975147075136
文章介绍了防抖和节流的基本原理,提供了最常用的防抖和节流的实现代码,并附带了使用示例,同时,文章还讨论了带立即执行的防抖,以及如何快速记忆这两种技术,最后,文章提出可以为有需要的读者编写一个更高级的防抖节流版本,需要的朋友可以参考下
下面给你最常用、最标准、直接可复制的防抖 & 节流实现，附带使用示例，一看就会。
1. 防抖（Debounce）
原理：频繁触发时，只在最后一次触发后延迟执行，中间全部忽略。
最简实现
function debounce(fn, delay = 300) {
let timer = null;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
使用示例（搜索框）
const onSearch = debounce((value) => {
console.log("请求搜索:", value);
}, 500);
input.addEventListener("input", (e) => {
onSearch(e.target.value);
});
2. 节流（Throttle）
原理：固定时间内只执行一次，不管触发多频繁。
时间戳版（立即执行，更常用）
function throttle(fn, interval = 300) {
let lastTime = 0;
return function (...args) {
const now = Date.now();
if (now - lastTime >= interval) {
fn.apply(this, args);
lastTime = now;
}
};
}
使用示例（滚动）
const handleScroll = throttle(() => {
console.log("滚动位置", window.scrollY);
}, 300);
window.addEventListener("scroll", handleScroll);
3. 带立即执行的防抖（可选）
有些场景希望第一次立即执行，后面再防抖：
function debounceImmediate(fn, delay = 300) {
let timer = null;
return function (...args) {
const isFirst = !timer;
clearTimeout(timer);
timer = setTimeout(() => {
timer = null;
}, delay);
if (isFirst) {
fn.apply(this, args);
}
};
}
4. 快速记忆
- 防抖：等你停手再执行 → 搜索框、输入验证、按钮防重复点击
- 节流：冷却时间 → 滚动、拖拽、resize、高频点击
需要我给你写一个带取消功能、支持立即执行、兼容 React 的高级版防抖节流吗？
以上就是在JavaScript中实现防抖和节流的方法详解的详细内容，更多关于JavaScript实现防抖和节流的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了在js中如何准确的判断一个变量的类型，文中代码非常详细，帮助大家更好的学习，有兴趣的朋友可以了解下2020-06-06
本实例描述了如何用Javascript来控制和获取文本框/文本域的鼠标光标位置，以下代码兼容IE和Chrome，Firefox，大家参考使用吧2014-01-01
这篇文章主要为大家详细介绍了JavaScript实现网页计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
setattribute批量设置css样式的实现代码。2009-11-11
这篇文章主要为大家详细介绍了JavaScript使用面向对象编程实现烟花特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要为大家详细介绍了微信小程序实现倒计时补零功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
TensorFlow.js是一个开源的基于硬件加速的JavaScript库，用于训练和部署机器学习模型。本教程将会带大家简单了解和使用TensorFlow.js框架实现预测鸢尾花种类2022-11-11
这篇文章主要介绍了js实现汉字排序的方法,涉及javascript针对中文编码的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
这篇文章主要为大家详细介绍了如何基于HTML5 Canvas和jQuery实现的简单网页版绘图编辑器,文中的示例代码讲解详细,需要的小伙伴可以了解下2024-10-10
Three.js如何用轨迹球插件（trackball）增加对模型的交互功能详解
这篇文章主要给大家介绍了关于Three.js如何用轨迹球插件，也就是trackball增加对模型的交互功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-09-09
最新评论