当前位置：首页 > JavaScript

js实现防洪

2026-02-28 19:26:52JavaScript

实现防洪功能的JavaScript方法

防洪（Flood Control）通常指在Web应用中防止用户短时间内频繁提交请求或操作，例如重复点击按钮、恶意刷接口等。以下是几种常见的实现方式：

防抖（Debounce）

防抖确保在事件触发后延迟执行回调，若在延迟期间再次触发则重新计时。适用于输入框搜索联想等场景。

js实现防洪

function debounce(func, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

// 使用示例
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(function() {
  console.log('发送搜索请求');
}, 500));

节流（Throttle）

节流规定在单位时间内最多执行一次回调。适用于滚动事件、按钮频繁点击等场景。

js实现防洪

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 button = document.getElementById('submit');
button.addEventListener('click', throttle(function() {
  console.log('提交表单');
}, 1000));

请求锁（Request Lock）

通过标志位或Promise状态锁定请求，避免并发重复提交。

let isSubmitting = false;

async function handleSubmit() {
  if (isSubmitting) return;
  isSubmitting = true;

  try {
    await fetch('/api/submit', { method: 'POST' });
  } finally {
    isSubmitting = false;
  }
}

令牌桶算法（Token Bucket）

高级限流算法，控制请求速率。适用于API调用限制。

class TokenBucket {
  constructor(capacity, fillRate) {
    this.capacity = capacity;
    this.tokens = capacity;
    this.fillRate = fillRate; // 令牌/毫秒
    this.lastTime = Date.now();
  }

  consume(tokens = 1) {
    this.refill();
    if (this.tokens >= tokens) {
      this.tokens -= tokens;
      return true;
    }
    return false;
  }

  refill() {
    const now = Date.now();
    const delta = (now - this.lastTime) * this.fillRate;
    this.tokens = Math.min(this.capacity, this.tokens + delta);
    this.lastTime = now;
  }
}

// 使用示例
const bucket = new TokenBucket(10, 0.001); // 10令牌，每秒补充1个
setInterval(() => {
  if (bucket.consume()) {
    console.log('允许请求');
  } else {
    console.log('请求被限流');
  }
}, 100);