防抖(Debounce)是一种防止重复提交的策略,它通过延迟一定时间来合并连续的操作,以确保只执行一次。

前端 JavaScript 实现

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

const submitForm = debounce(function() {
    // 在这里执行表单提交操作
}, 1000); // 延迟 1 秒执行
<button id="submitBtn" onclick="submitForm()">Submit</button>

<script>
    let submitting = false;

    function submitForm() {
        if (!submitting) {
            submitting = true;
            // 执行表单提交操作
            document.getElementById('submitBtn').disabled = true;
        }
    }
</script>

防抖

  • Session Token防抖

    // 生成随机的 token
    $token = md5(uniqid());
    
    // 存储 token 到会话
    $_SESSION['submit_token'] = $token;
    
    // 在表单中嵌入 token
    echo '<input type="hidden" name="submit_token" value="' . $token . '">';
    
    // 处理表单提交时的校验
    if ($_POST['submit_token'] === $_SESSION['submit_token']) {
      // 处理表单提交
      // 清除会话中的 token
      unset($_SESSION['submit_token']);
    }
  • Token防抖(利用随机生成的 token 来防止重复提交)

    $token = md5(uniqid());
    echo '<input type="hidden" name="submit_token" value="' . $token . '">';
    
    if ($_POST['submit_token'] === $token) {
      // 处理表单提交
    }
  • 时间戳防抖

    $currentTime = time();
    $lastSubmitTime = $_SESSION['last_submit_time'] ?? 0;
    
    if ($currentTime - $lastSubmitTime > 5) {
      // 处理表单提交
      $_SESSION['last_submit_time'] = $currentTime;
    }
    
  • IP地址防抖 (利用IP地址来防止相同IP的重复提交)

    $userIP = $_SERVER['REMOTE_ADDR'];
    $lastSubmitIP = $_SESSION['last_submit_ip'] ?? '';
    
    if ($userIP !== $lastSubmitIP) {
      // 处理表单提交
      $_SESSION['last_submit_ip'] = $userIP;
    }
    
  • Cookie防抖 (利用Cookie来防止在一段时间内的重复提交)

    if (!isset($_COOKIE['submit_cookie'])) {
      // 处理表单提交
      setcookie('submit_cookie', 'submitted', time() + 60); // 60秒内不允许重复提交
    }
  • 延时防抖(在最后一次操作后的一段时间内,只执行一次提交操作)

    if (!isset($_SESSION['submit_timer'])) {
      $_SESSION['submit_timer'] = time();
    }
    
    if (time() - $_SESSION['submit_timer'] > 10) {
      // 处理表单提交
      $_SESSION['submit_timer'] = time();
    }
    
  • 数据库唯一性约束(利用数据库的唯一性约束来防止重复插入数据)

    try {
      // 尝试插入数据,如果插入失败会抛出异常
      // 添加数据库的唯一性索引或唯一性约束以防止重复数据
    } catch (Exception $e) {
      // 处理插入失败的情况
    }
    
  • 缓存防抖(利用缓存系统来记录提交状态)

    $cacheKey = 'submit_status_' . $userIP;
    if (!cache_get($cacheKey)) {
      // 处理表单提交
      cache_set($cacheKey, 'submitted', 60); // 60秒内不允许重复提交
    }
  • 验证码防抖(要求用户输入特定的验证码来提交表单,防止恶意重复提交)

    if ($_POST['captcha'] === $_SESSION['captcha_code']) {
      // 处理表单提交
      // 清除验证码,以防止多次使用同一个验证码
      unset($_SESSION['captcha_code']);
    }
Last modification:September 7, 2023
如果觉得我的文章对你有用,请随意赞赏