jQuery倒计时结束后，如何弹出提示并提交表单？

问题分析 #

原代码存在两个关键问题：

1. 每次定时器执行都会新建一个setTimeout，会导致表单被重复提交，且触发时机和倒计时结束不同步。
2. 表单提交逻辑没有等待用户确认弹窗，直接执行，不符合“点击确定后再提交”的需求。

修正后的代码 #

HTML 代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="demo"></div>
<form id="form">
  <input name="hello" value="hello">
</form>

（原代码引入的jquery.countdown插件未被使用，直接移除即可）

JavaScript 代码 #

var timer2 = "00:05";
var interval = setInterval(function() {
  var timer = timer2.split(':');
  var minutes = parseInt(timer[0], 10);
  var seconds = parseInt(timer[1], 10);
  
  --seconds;
  // 秒数不够减时，分钟减1，秒数重置为59
  if (seconds < 0) {
    minutes--;
    seconds = 59;
  }
  
  // 格式化秒数为两位数字
  seconds = seconds < 10 ? '0' + seconds : seconds;
  // 保持分钟显示逻辑不变
  minutes = minutes < 10 ? minutes : minutes;
  
  $('.demo').html(minutes + ':' + seconds);
  timer2 = minutes + ':' + seconds;
  
  // 倒计时结束判断：分钟和秒都为0时触发
  if (minutes === 0 && seconds === 0) {
    clearInterval(interval);
    // 弹出提示，点击确定后提交表单
    alert('测验已结束');
    $('#form').submit();
  }
}, 1000);

修改说明 #

• 移除了冗余的setTimeout，改为倒计时到00:00时触发结束逻辑，确保时机完全同步。
• 将表单提交放在alert之后，利用alert的阻塞特性，用户点击“确定”后才会执行提交操作。
• 优化了倒计时的递减逻辑，让代码逻辑更清晰易懂。
• 删除了未使用的插件引用，减少不必要的资源加载。

内容的提问来源于stack exchange，提问作者Bagova