前后端实现防抖节流实现
在前端和 Java 后端中实现防抖（Debounce）和节流（Throttle）主要用于减少频繁请求或事件触发对系统的压力。前端和后端的实现方式有些不同，以下是两种方法的具体实现：
1. 前端实现防抖和节流
在前端中，可以使用 JavaScript 实现防抖和节流，用于控制频繁触发的事件（如键盘输入、滚动、窗口调整大小等）。
前端防抖（Debounce）
防抖的原理是：在事件触发后等待一定时间，如果在这段时间内又触发了同样的事件，则重新计时。防抖常用于搜索框输入等场景，以减少请求次数。
// 防抖函数
function debounce(func, delay) {
let timer;
return function(...args) {
clearTimeout(timer); // 每次触发都清除之前的计时器
timer = setTimeout(() => func.apply(this, args), delay);
};
}
// 使用防抖
const handleInput = debounce((event) => {
console.log("Input value:", event.target.value);
// 这里执行请求或其他操作
}, 500);
// 绑定到输入框的输入事件
document.getElementById("searchInput").addEventListener("input", handleInput);在这个例子中，handleInput 只有在用户停止输入超过 500 毫秒后才会被执行。
前端节流（Throttle）
节流的原理是：在一定时间间隔内只允许一次操作，忽略其余操作。节流常用于滚动事件、按钮点击等场景，减少事件触发频率。
// 节流函数
function throttle(func, interval) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastTime >= interval) {
func.apply(this, args);
lastTime = now;
}
};
}
// 使用节流
const handleScroll = throttle(() => {
console.log("Scrolled");
// 这里执行操作，如懒加载
}, 1000);
// 绑定到滚动事件
window.addEventListener("scroll", handleScroll);在这个例子中，handleScroll 最多每隔 1000 毫秒触发一次。
2. Java 后端实现防抖和节流
在 Java 后端中，可以通过请求次数限制、缓存等方式实现防抖和节流，常用于限制接口访问频率或控制资源消耗。
后端防抖（Debounce）
在后端实现防抖可以通过 请求时间检测 或 缓存 来实现。例如，如果用户在一定时间内发送了多次相同请求，可以忽略后续请求。
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.TimeUnit;
public class DebounceService {
private ConcurrentHashMap<String, Long> requestMap = new ConcurrentHashMap<>();
// 防抖处理
public boolean isAllowed(String userId, long debounceTimeMs) {
long now = System.currentTimeMillis();
Long lastRequestTime = requestMap.get(userId);
if (lastRequestTime == null || now - lastRequestTime > debounceTimeMs) {
requestMap.put(userId, now);
return true; // 允许请求
} else {
return false; // 拒绝请求
}
}
}在这个示例中，isAllowed 方法在一定时间内只允许一个请求，通过检查上次请求时间与当前时间的差值实现防抖。
后端节流（Throttle）
后端的节流通常通过令牌桶（Token Bucket）算法、计数器等方式实现。下面是使用 令牌桶 的简单示例，每隔固定时间生成一定数量的请求令牌，超出限制的请求会被拒绝。
import java.util.concurrent.Semaphore;
import java.util.concurrent.TimeUnit;
public class ThrottleService {
private final Semaphore semaphore;
// 构造函数传入限制请求的数量
public ThrottleService(int maxRequestsPerSecond) {
this.semaphore = new Semaphore(maxRequestsPerSecond);
}
public boolean tryAcquire() {
return semaphore.tryAcquire();
}
public void release() {
semaphore.release();
}
}
// 使用节流服务
public class ApiController {
private final ThrottleService throttleService = new ThrottleService(5); // 每秒最多5个请求
public void handleRequest(String userId) {
if (throttleService.tryAcquire()) {
try {
// 处理请求逻辑
System.out.println("Request allowed for user: " + userId);
} finally {
throttleService.release();
}
} else {
System.out.println("Request denied for user: " + userId);
}
}
}在这个示例中，ThrottleService 每次允许的最大请求数为 5，超出限制的请求会被拒绝。
总结
- 前端防抖适用于减少频繁触发的用户输入事件，前端节流用于限制连续触发的操作（如滚动、点击）。
- 后端防抖通过记录上次请求时间控制一定时间内只允许一个请求。
- 后端节流通过设置最大请求量的限制，每秒只允许固定次数的请求。
这些方法可以帮助优化系统性能，避免因频繁请求带来的负担。选择合适的防抖或节流方式，能够有效平衡用户体验和系统性能。
原文地址：https://blog.csdn.net/2301_79969279/article/details/145012524
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！