实现鼠标按下延迟提交、抬起取消的表单按钮及相关问题修复

架构老林

2026-10-3

问题根因

变量拼写不一致：mousedown回调中定义的计时器变量名为bnt_timeout，mouseup回调中清除时写的是btn_timeout，拼写错误导致计时器无法正常清除，所以鼠标抬起后提交逻辑仍会执行。
事件绑定时机错误：你大概率是在按钮的点击事件中才调用conf_submit()函数绑定mousedown、mouseup事件，第一次点击时事件还没完成绑定，所以首次交互不生效。
缺少倒计时更新逻辑：没有额外的定时器定时更新按钮上的剩余时间文本。

修复后完整实现代码

// 页面加载完成后直接绑定事件，不要放到点击回调里
$(function() {
  let submitTimer = null;
  let countDownTimer = null;
  const totalWaitTime = 2000; // 总等待时长2秒
  let remainTime = totalWaitTime / 1000;

  $('#submitBtn').mousedown(function() {
    remainTime = totalWaitTime / 1000;
    const $btn = $(this);
    $btn.val(`Release to cancel! (${remainTime}s)`);
    $btn.attr('class', 'btn_down');

    // 提交计时器
    submitTimer = setTimeout(function() {
      clearInterval(countDownTimer);
      alert("form submitted");
      // 提交完成后重置按钮状态
      $btn.val("Submit");
      $btn.attr('class', 'btn_up');
    }, totalWaitTime);

    // 倒计时更新计时器
    countDownTimer = setInterval(function() {
      remainTime--;
      $btn.val(`Release to cancel! (${remainTime}s)`);
    }, 1000);
  });

  $('#submitBtn').on('mouseup mouseleave', function() {
    // 鼠标抬起或者移出按钮都清除计时器，取消提交
    clearTimeout(submitTimer);
    clearInterval(countDownTimer);
    $(this).val("Submit");
    $(this).attr('class', 'btn_up');
  });
});