解开防抖与节流之谜：提升你的代码效率**

前端

2024-02-15 15:37:12

防抖和节流：优化事件处理和代码性能

什么是防抖？

防抖是一种技术，它允许函数在一定时间内只执行一次，即使触发事件的频率更高。它就像一个阀门，防止高频事件淹没应用程序，从而导致性能问题。

想象一个输入字段，用户正在输入文本。如果没有防抖，每次用户按下一个键，都会触发一个事件。这会导致大量请求发送到服务器进行验证，从而造成不必要的负载和延迟。

防抖通过创建一个计时器来解决这个问题。当事件被触发时，计时器被启动。如果计时器结束时没有触发其他事件，则执行函数。如果在计时器结束之前发生了另一个事件，则计时器将重新启动，函数将不会执行。

防抖的应用场景

输入字段验证
窗口大小调整
滚动事件处理

什么是节流？

节流是一种技术，它允许函数在一定时间内最多执行一次。它就像一个过滤器，用于限制函数的执行频率。

与防抖不同，节流在触发事件时立即执行函数。然而，它会创建一个令牌，以防止函数在一段时间内再次执行。如果在令牌可用之前再次触发事件，则函数将被阻止执行。

节流的应用场景

按钮点击
API 请求
动画

代码示例

JavaScript

// 防抖
const debounce = (func, wait) => {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => func(...args), wait);
  };
};

// 节流
const throttle = (func, wait) => {
  let token = true;
  return (...args) => {
    if (token) {
      token = false;
      func(...args);
      setTimeout(() => { token = true; }, wait);
    }
  };
};

Python

import time

# 防抖
def debounce(wait):
  def decorator(func):
    def wrapper(*args, **kwargs):
      if not wrapper.last_call_time:
        wrapper.last_call_time = time.time()
        return func(*args, **kwargs)
      else:
        current_time = time.time()
        if (current_time - wrapper.last_call_time) >= wait:
          wrapper.last_call_time = current_time
          return func(*args, **kwargs)
    wrapper.last_call_time = None
    return wrapper
  return decorator

# 节流
def throttle(wait):
  def decorator(func):
    def wrapper(*args, **kwargs):
      if not wrapper.last_call_time or (time.time() - wrapper.last_call_time) >= wait:
        wrapper.last_call_time = time.time()
        return func(*args, **kwargs)
    wrapper.last_call_time = None
    return wrapper
  return decorator