面试高频手撕题 | 23.实现一个防抖和节流

一、知识点

防抖和节流都是在 JavaScript 中常见的用于优化性能的技术。

1. 防抖：是一种在短时间内多次触发同一事件，只执行最后一次或只在开始时执行的技术。它的目的是减少不必要的事件调用，避免在短时间内频繁执行某个操作。
2. 节流：是一种限制某个函数在一定时间内只能被调用一次的技术。它的目的是控制函数的调用频率，减少不必要的性能消耗。

二、思路分析

1. 防抖的思路：在事件被触发后，延迟一定时间执行回调函数，如果在延迟时间内该事件再次被触发，则重新计时，直到延迟时间内没有再次触发事件，才执行回调函数。
2. 节流的思路：在指定的单位时间内，只允许触发一次函数，如果该单位时间内触发多次函数，只有一次生效。

三、JavaScript 解答

1. 防抖的实现：

   function antiShake(fn,delay) {
       let timer;
       return function(...args) {
           // 清除定时器
           clearTimeout(timer);
           // 使用定时器
           timer = setTimeout(()=>{
               fn.apply(this,args);
           },delay)
       }
   }
   const button = document.getElementById('myButton');
   // 绑定事件处理程序
   button.addEventListener('click', antiShake(()=>{
       console.log('按钮被点击了')
   },1000))
   

   在上述示例中，使用setTimeout实现了防抖功能。在指定的单位时间内，只响应最后一次。

2. 节流的实现

   function throttling(fn,delay) {
       let flag = true;
       return function(...args) {
           if(flag) {
               flag = false;
               setTimeout(()=>{
                   fn.apply(this,args);
                   flag = true
               },delay)
           }
       }
   }
   const button = document.getElementById('myButton');
   // 绑定事件处理程序
   button.addEventListener('click',throttling(()=>{
       console.log('按钮被点击了')
   },1000))
   

   在上述示例中，使用了一个布尔值flag来控制函数的执行，实现了节流功能。

四、Java 解答

在 Java 中，你可以使用TimeUnit类来实现防抖和节流。

1. 防抖的实现：

   import java.util.Timer;
   import java.util.TimerTask;
   
   public class Debounce {
       private Timer timer;
       private Runnable task;