前后端实现防抖节流实现

在前端和 Java 后端中实现防抖（Debounce）和节流（Throttle）主要用于镌汰频繁哀求或事件触发对系统的压力。前端和后端的实现方式有些不同，以下是两种方法的具体实现：
1. 前端实现防抖和节流

在前端中，可以利用 JavaScript 实现防抖和节流，用于控制频繁触发的事件（如键盘输入、滚动、窗口调整大小等）。
前端防抖（Debounce）

防抖的原理是：在事件触发后等候肯定时间，如果在这段时间内又触发了同样的事件，则重新计时。防抖常用于搜刮框输入等场景，以镌汰哀求次数。

1. // 防抖函数
2. function debounce(func, delay) {
3.     let timer;
4.     return function(...args) {
5.         clearTimeout(timer); // 每次触发都清除之前的计时器
6.         timer = setTimeout(() => func.apply(this, args), delay);
7.     };
8. }
10. // 使用防抖
11. const handleInput = debounce((event) => {
12.     console.log("Input value:", event.target.value);
13.     // 这里执行请求或其他操作
14. }, 500);
16. // 绑定到输入框的输入事件
17. document.getElementById("searchInput").addEventListener("input", handleInput);

复制代码

在这个例子中，handleInput 只有在用户制止输入凌驾 500 毫秒后才会被执行。
前端节流（Throttle）

节流的原理是：在肯定时间间隔内只允许一次操作，忽略其余操作。节流常用于滚动事件、按钮点击等场景，镌汰事件触发频率。

1. // 节流函数
2. function throttle(func, interval) {
3.     let lastTime = 0;
4.     return function(...args) {
5.         const now = Date.now();
6.         if (now - lastTime >= interval) {
7.             func.apply(this, args);
8.             lastTime = now;
9.         }
10.     };
11. }
13. // 使用节流
14. const handleScroll = throttle(() => {
15.     console.log("Scrolled");
16.     // 这里执行操作，如懒加载
17. }, 1000);
19. // 绑定到滚动事件
20. window.addEventListener("scroll", handleScroll);

复制代码

在这个例子中，handleScroll 最多每隔 1000 毫秒触发一次。
2. Java 后端实现防抖和节流

在 Java 后端中，可以通过哀求次数限制、缓存等方式实现防抖和节流，常用于限制接口访问频率或控制资源斲丧。
后端防抖（Debounce）

在后端实现防抖可以通过 哀求时间检测 或 缓存 来实现。例如，如果用户在肯定时间内发送了多次相同哀求，可以忽略后续哀求。

1. import java.util.concurrent.ConcurrentHashMap;
2. import java.util.concurrent.TimeUnit;
4. public class DebounceService {
5.     private ConcurrentHashMap<String, Long> requestMap = new ConcurrentHashMap<>();
7.     // 防抖处理
8.     public boolean isAllowed(String userId, long debounceTimeMs) {
9.         long now = System.currentTimeMillis();
10.         Long lastRequestTime = requestMap.get(userId);
12.         if (lastRequestTime == null || now - lastRequestTime > debounceTimeMs) {
13.             requestMap.put(userId, now);
14.             return true; // 允许请求
15.         } else {
16.             return false; // 拒绝请求
17.         }
18.     }
19. }

复制代码

在这个示例中，isAllowed 方法在肯定时间内只允许一个哀求，通过检查前次哀求时间与当前时间的差值实现防抖。
后端节流（Throttle）

后端的节流畅常通过令牌桶（Token Bucket）算法、计数器等方式实现。下面是利用 令牌桶 的简单示例，每隔固定时间天生肯定数目的哀求令牌，超出限制的哀求会被拒绝。

1. import java.util.concurrent.Semaphore;
2. import java.util.concurrent.TimeUnit;
4. public class ThrottleService {
5.     private final Semaphore semaphore;
7.     // 构造函数传入限制请求的数量
8.     public ThrottleService(int maxRequestsPerSecond) {
9.         this.semaphore = new Semaphore(maxRequestsPerSecond);
10.     }
12.     public boolean tryAcquire() {
13.         return semaphore.tryAcquire();
14.     }
16.     public void release() {
17.         semaphore.release();
18.     }
19. }
21. // 使用节流服务
22. public class ApiController {
23.     private final ThrottleService throttleService = new ThrottleService(5); // 每秒最多5个请求
25.     public void handleRequest(String userId) {
26.         if (throttleService.tryAcquire()) {
27.             try {
28.                 // 处理请求逻辑
29.                 System.out.println("Request allowed for user: " + userId);
30.             } finally {
31.                 throttleService.release();
32.             }
33.         } else {
34.             System.out.println("Request denied for user: " + userId);
35.         }
36.     }
37. }

复制代码

在这个示例中，ThrottleService 每次允许的最大哀求数为 5，超出限制的哀求会被拒绝。
总结

• 前端防抖适用于镌汰频繁触发的用户输入事件，前端节流用于限制一连触发的操作（如滚动、点击）。
  
• 后端防抖通过记录前次哀求时间控制肯定时间内只允许一个哀求。
  
• 后端节流通过设置最大哀求量的限制，每秒只允许固定次数的哀求。
  

这些方法可以资助优化系统性能，制止因频繁哀求带来的负担。选择合适的防抖或节流方式，可以或许有效平衡用户体验和系统性能。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。