当前位置：首页 > JavaScript

js实现防洪

2026-04-03 19:51:48JavaScript

使用防抖（Debounce）技术

防抖是一种延迟执行函数的技术，直到事件停止触发一段时间后才执行。适用于输入框实时搜索、窗口大小调整等场景。

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

// 使用示例
const searchInput = document.getElementById('search');
const debouncedSearch = debounce(function() {
  console.log('执行搜索:', searchInput.value);
}, 500);

searchInput.addEventListener('input', debouncedSearch);

使用节流（Throttle）技术

节流确保函数在一定时间间隔内最多执行一次。适用于滚动事件、鼠标移动等高频触发场景。

js实现防洪

function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

// 使用示例
window.addEventListener('scroll', throttle(function() {
  console.log('滚动事件处理');
}, 1000));

限制请求频率

对于API请求，可以结合防抖/节流与计数器来限制请求频率。

js实现防洪

let requestCount = 0;
const MAX_REQUESTS = 5;
const TIME_WINDOW = 10000; // 10秒

function makeRequest() {
  if (requestCount < MAX_REQUESTS) {
    requestCount++;
    setTimeout(() => requestCount--, TIME_WINDOW);
    console.log('请求发送');
  } else {
    console.log('请求过多，请稍后再试');
  }
}

验证码机制

在关键操作前加入验证码验证，可以有效防止自动化脚本的滥用。

function showCaptcha() {
  // 显示验证码UI
  console.log('请完成验证码验证');
  return new Promise(resolve => {
    // 假设用户完成验证后调用resolve
    setTimeout(() => resolve(true), 1000);
  });
}

async function sensitiveOperation() {
  const verified = await showCaptcha();
  if (verified) {
    console.log('执行敏感操作');
  }
}

令牌桶算法

更高级的流量控制算法，允许突发流量但限制平均速率。

class TokenBucket {
  constructor(capacity, fillPerSecond) {
    this.capacity = capacity;
    this.tokens = capacity;
    setInterval(() => this.addToken(), 1000 / fillPerSecond);
  }

  addToken() {
    if (this.tokens < this.capacity) {
      this.tokens++;
    }
  }

  take() {
    if (this.tokens > 0) {
      this.tokens--;
      return true;
    }
    return false;
  }
}

// 使用示例
const bucket = new TokenBucket(10, 5);
function handleRequest() {
  if (bucket.take()) {
    console.log('请求处理');
  } else {
    console.log('限流中');
  }
}

这些方法可以根据实际场景组合使用，构建多层次的防洪系统。防抖和节流适合处理用户界面交互，令牌桶算法更适合API级别的流量控制，验证码则适用于关键操作的安全验证。

标签: js