JS按钮连击和接口调用频率限制防止客户爆仓

JS按钮连击和接口调用频率限制防止客户爆仓是前端开发中非常重要的两个问题，此处进行详细讲解。

JS按钮连击

在网页中，用户经常会通过点击按钮等界面元素执行某些操作。如果用户在短时间内多次连续点击同一个按钮，就会引发“按钮连击”问题。如何避免JS按钮连击问题呢？下面介绍几种常用的方法：

1. 禁用按钮

可以在按钮第一次点击时禁用按钮，在处理完当前请求后再重新启用按钮，这样可以防止用户在同一时间内一直连续点击按钮。示例代码如下：

<button id="btn" onclick="handleClick()">Click</button>
<script>
  let isBtnEnabled = true;
  function handleClick() {
    if (!isBtnEnabled) {
      return;
    }
    isBtnEnabled = false;
    // 处理按钮点击事件
    // ...
    setTimeout(() => {
      isBtnEnabled = true;
    }, 1000); // 1s后重新启用按钮
  }
</script>

2. 使用节流函数

可以使用节流函数，限制函数执行频率，这样可以一定程度上避免按钮连击问题。示例代码如下：

<button id="btn" onclick="handleClick()">Click</button>
<script>
  function throttle(fn, delay) {
    let timerId = null;
    let lastExecTime = 0;
    return function(...args) {
      const now = Date.now();
      if (now - lastExecTime > delay) {
        clearTimeout(timerId);
        fn.apply(this, args);
        lastExecTime = now;
      } else {
        timerId = setTimeout(() => {
          fn.apply(this, args);
          lastExecTime = now;
        }, delay - (now - lastExecTime));
      }
    }
  }

  const handleClick = throttle(() => {
    // 处理按钮点击事件
    // ...
  }, 1000); // 1s内最多执行一次
</script>

接口调用频率限制

在网站开发中，客户通过接口与后端进行数据交互，通过调用接口获取或修改服务器上的数据，如何防止客户卡爆接口呢？下面介绍几种常用的方法：

1. 检查请求频率

可以在前端通过JS记录每次请求的时间，当客户连续多次请求接口时，判断与上一次请求的时间间隔是否小于一定的时长，如果是则说明客户请求频率过快，将抛出异常提示用户调整频率。示例代码如下：

const MIN_REQUEST_INTERVAL = 100; // 最小请求时间间隔
let lastRequestTime = 0;
function ajax(url, data) {
  return new Promise((resolve, reject) => {
    const now = Date.now();
    if (now - lastRequestTime < MIN_REQUEST_INTERVAL) {
      reject(new Error('调用接口过于频繁，请稍后重试'));
      return;
    }
    lastRequestTime = now;
    // 发起Ajax请求
    // ...
  });
}

2. 增加请求限制

可以通过在后端接口代码中增加特定的请求限制，如在返回响应之前增加一个计数器，记录自己在一定时间内（如1秒或5秒）已经被调用的次数，如果次数超出限制，就抛出异常或停止返回响应结果。示例代码如下：

const MAX_REQUEST_COUNT = 5; // 一定时间内最多请求次数
const REQUEST_INTERVAL = 1000; // 请求限制时间间隔，单位毫秒
let requestCount = 0;
let requestIntervalStart = Date.now();
function api(req, res) {
  const now = Date.now();
  if (now - requestIntervalStart > REQUEST_INTERVAL) {
    requestIntervalStart = now;
    requestCount = 0;
  }
  requestCount += 1;
  if (requestCount > MAX_REQUEST_COUNT) {
    res.status(429).send('Too Many Requests');
    return;
  }
  // 处理请求，返回响应
  // ...
}