倒计时结束表单重复提交及event.preventDefault()报错问题求助

嘿，我来帮你梳理下代码里的问题，以及怎么修复这些问题：

问题根源分析 #

1. event.preventDefault is not a function 错误 #

你在倒计时结束的代码里写了 $(function(event) { ... }) —— 这个写法其实是 $(document).ready() 的简写，它的参数是jQuery对象（一般我们习惯命名为$），不是事件对象！所以这里的event根本没有preventDefault方法，自然会报错。而且这段代码完全多余，因为你的整个逻辑已经包裹在$(document).ready()里面了，不需要再嵌套一次。

2. 表单重复提交 #

一方面是上面的错误导致代码逻辑混乱，另一方面，没有一个状态标记来跟踪表单是否已经提交过。哪怕定时器正常清理，也可能因为某些意外情况触发多次提交逻辑。

修正后的完整代码 #

<script>
$(document).ready(function () {
    // 新增状态标记：记录表单是否已提交，防止重复提交
    let hasSubmitted = false;

    $('#startbutton').click(function (e) {
        // 阻止按钮的默认行为（如果是submit类型按钮的话很有必要）
        e.preventDefault();
        
        const timeValue = $(this).attr('timevalue');
        const totalSeconds = 60 * parseInt(timeValue);
        
        $('#festus').hide();
        const display = $('#time');
        startTimer(totalSeconds, display);
    });

    function startTimer(duration, display) {
        let timer = duration;
        const timerInterval = setInterval(function () {
            const minutes = parseInt(timer / 60, 10);
            const seconds = parseInt(timer % 60, 10);
            
            // 格式化时间为两位数字
            const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;
            const formattedSeconds = seconds < 10 ? `0${seconds}` : seconds;
            
            display.text(`${formattedMinutes}:${formattedSeconds}`);

            if (--timer < 0) {
                // 立即清理定时器，避免后续触发
                clearInterval(timerInterval);
                
                // 检查是否已经提交过，防止重复提交
                if (hasSubmitted) return;
                hasSubmitted = true;

                const formUrl = $('#questionsandanswers').attr('action');
                // 用serialize()更简洁，直接生成POST需要的键值对字符串
                const formData = $('#questionsandanswers').serialize();
                
                // 直接发起POST请求，去掉多余的ready回调
                $.post(formUrl, formData, function () {
                    alert('time is up you can no longer proceed');
                })
                .fail(function() {
                    // 可选：如果请求失败，重置标记让用户可以重试（根据业务需求调整）
                    hasSubmitted = false;
                    alert('提交失败，请稍后重试');
                });
            }
        }, 1000);
    }
});
</script>

核心修复点 #

• 移除错误的嵌套$(function)：彻底解决preventDefault的报错问题。
• 添加提交状态标记hasSubmitted：确保倒计时结束后只会提交一次表单，哪怕有意外情况也不会重复提交。
• 简化表单数据处理：用serialize()代替serializeArray()，更适配$.post的参数要求，代码更简洁。
• 完善定时器清理：倒计时结束后立即清理定时器，避免定时器继续运行引发异常。
• 增加请求失败处理：可选地在请求失败时重置提交标记，方便用户重试（你可以根据实际业务决定是否保留）。

另外补充一点：如果你的#startbutton是<input type="submit">，那e.preventDefault()是必须的，防止点击按钮时直接触发表单默认提交；如果是普通的<button>，这个代码可以保留，也可以删掉，不影响逻辑。

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