面试高频手撕题 | 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;
   
       public Debounce(Runnable task, int delayMillis) {
           this.task = task;
           this.timer = new Timer();
       }
   
       public void debounce() {
           // 取消之前的计时器任务
           timer.cancel(); 
           timer = new Timer(); 
           // 创建一个新的计时器任务，并在指定的延迟后执行防抖任务
           timer.schedule(new TimerTask() {
               @Override
               public void run() {
                   task.run(); 
               }
           }, delayMillis);
       }
   }
   
   public class Main {
       public static void main(String[] args) {
           Debounce debounce = new Debounce(() -> {
               System.out.println("执行防抖操作");
           }, 1000);
   
           for (int i = 0; i < 10; i++) {
               debounce.debounce();
           }
       }
   }
   

   在上述示例中，使用java.util.Timer和TimerTask实现了防抖功能。

2. 节流的实现：

   import java.util.concurrent.TimeUnit;
   
   public class Throttle {
       private long lastExecutionTime;
   
       public Throttle() {
           // 记录上次执行时间
           this.lastExecutionTime = System.currentTimeMillis();
       }
   
       public void executeThrottled() {
           long currentTime = System.currentTimeMillis();
           long timeSinceLastExecution = currentTime - lastExecutionTime;
   
           if (timeSinceLastExecution >= throttleDelayMillis) {
               // 执行节流任务
               System.out.println("执行节流操作");
               // 更新上次执行时间
               lastExecutionTime = currentTime;
           }
       }
   
       public long getThrottleDelayMillis() {
           return throttleDelayMillis;
       }
   
       public void setThrottleDelayMillis(long throttleDelayMillis) {
           this.throttleDelayMillis = throttleDelayMillis;
       }
   }
   
   public class Main {
       public static void main(String[] args) {
           Throttle throttle = new Throttle();
           throttle.setThrottleDelayMillis(1000);
   
           for (int i = 0; i < 10; i++) {
               throttle.executeThrottled();
           }
       }
   }
   

   在上述示例中，使用时间差判断是否执行。

五、总结

防抖和节流都是常见的性能优化技术，用于限制某个函数在短时间内被频繁调用。防抖的目的是确保在指定的时间间隔内，函数只被执行一次，而节流是限制函数在一定时间内被调用的次数。在 JavaScript 中，你可以使用setTimeout和定时器来实现这两种技术。在 Java 中，可以使用TimeUnit类来实现。请根据具体的需求选择适合的实现方式。