javascript - 一段时间后提交表单

Question

我有一个表格。我在那里做了以下事情:

1. 当大图加载完成时隐藏加载动画并显示大图。
2. 运行一个函数，在一段时间(例如 2 分钟)后提交表单。
3. 用户仍可以在该时间段(2 分钟)之前提交表单。在这种情况下，他会收到警报。
4. 无论用户提交表单还是自动提交表单，我都会在提交表单之前执行一些任务。我记录了大图像加载后耗时。我将其保存在输入字段中，因为我需要耗时。如果用户在自动提交前有超过 1 分钟的时间，我会显示用户是否确定或可以在一段时间后提交表单的确认。

我以前使用倒计时器来处理自动提交，但现在我使用自定义倒计时时钟。所以，我正在控制自动提交。但这不起作用。这是正确运行的代码:

$(new Image()).on('load', function() {
    $('#loading_img').hide();
    $('#q').show();
    start_exam(get_end_time());
}).prop('src', $('#q').prop('src'))
    .each(function() { if (this.complete) $(this).trigger('load');});


$(document).ready(function(){
    $('#footer').hide();
    $('#header').hide();
});

function start_exam(end_time){
    /**
     * Load the countdown timer. It sometimes fails to load. At this kind of situation user won't be able to see any countdown timer.
     * Everything else should work properly.
     */
    $("#timer").jCountdown({
        timeText:end_time,
        timeZone:6,
        style:"flip",
        color:"white",
        width:0,
        textGroupSpace:15,
        textSpace:0,
        reflection:true,
        reflectionOpacity:15,
        reflectionBlur:2,
        dayTextNumber:4,
        displayDay:false,
        displayHour:false,
        displayMinute:true,
        displaySecond:true,
        displayLabel:false,
        onFinish:function(){
            exam_over();
        }
    });
}

// Do stuff when time is over or examinee submits answer script
function exam_over(){
    $('#RecordExamineeForm').submit();
    alert("Time over.");
}

function get_end_time(){
    var exam_duration = <?=($exam['duration'] * MINUTE); ?>;
    $('#RecordDuration').val(exam_duration);
    var start    = new Date();
    $('#RecordStartTime').val(Math.round(start/1000));
    start.setSeconds(start.getSeconds() + exam_duration);
    var end_time = start.getFullYear() + '/' + (start.getMonth() + 1) + '/' + start.getDate();
    end_time     += ' ' + start.getHours()+ ':' + start.getMinutes();
    end_time     += ':' + start.getSeconds();
    return end_time;
}

$('#RecordExamineeForm').submit(function(){
    var now       = new Date();
    var duration  = $('#RecordDuration').val();
    var passed    = Math.round((now - new Date($('#RecordStartTime').val() * 1000)) / 1000);
    $('#RecordPassed').val(passed);
    var time_left = duration - passed;
    if(time_left > 60){
        $('#RecordValid').val(true);
        return confirm('You have more ' + Math.floor(time_left / 60) + ' minutes, will you submit now?');
    }else if(time_left >= 0){
        $('#RecordValid').val(true);
        return true;
    }else{
        $('#RecordValid').val(false);
        return true;
    }
});

这是我现在正在尝试的代码:

$(new Image()).on('load', function() {
    $('#loading_img').hide();
    $('#q').show();
    start_exam(get_end_time()); //submit the form after end time
}).prop('src', $('#q').prop('src'))
    .each(function() { if (this.complete) $(this).trigger('load');});

// Do stuff when time is over or examinee submits answer script
function exam_over(){
    $('#RecordExamineeForm').submit();
    alert("Time over.");
}
function start_exam(delay){
    console.log(delay);
    $('#RecordExamineeForm').delay(delay).submit();
}
function get_end_time(){
    var exam_duration = <?=($exam['duration'] * MINUTE); ?>;
    $('#RecordDuration').val(exam_duration);
    var start    = new Date();
    $('#RecordStartTime').val(Math.round(start/1000));
    //console.log(exam_duration);
    return exam_duration * 1000;
}
$('#RecordExamineeForm').submit(function(){
    var now       = new Date();
    var duration  = $('#RecordDuration').val();
    var passed    = Math.round((now - new Date($('#RecordStartTime').val() * 1000)) / 1000);
    $('#RecordPassed').val(passed);
    var time_left = duration - passed;
    if(time_left > 60){
        $('#RecordValid').val(true);
        return confirm('You have more ' + Math.floor(time_left / 60) + ' minutes, will you submit now?');
    }else if(time_left >= 0){
        $('#RecordValid').val(true);
        return true;
    }else{
        $('#RecordValid').val(false);
        return true;
    }
});

如何使此代码运行或者如何重新安排以执行自动提交表单的任务？我还必须完成我在问题开头描述的任务。提前致谢。

更新:我已将 start_exam() 更改为:

function start_exam(delay){
    setTimeout(function() {
        exam_over();
    }, delay);
}

和上面一样，exam_over() 是:

function exam_over(){
    $('#RecordExamineeForm').submit();
    alert("Time over.");
}

但是 exam_over() 被执行了两次!你能告诉我为什么吗？

Answer 1

delay() 是一个仅用于动画 FX 队列的 jQuery 方法，因此它仅适用于动画，它不适用于提交事件，除非您使用 queue()，但使用超时会更容易

改变

function start_exam(delay){
    console.log(delay);
    $('#RecordExamineeForm').delay(delay).submit();
}

至

function start_exam(delay){
    console.log(delay);
    setTimeout(function() {
        $('#RecordExamineeForm').submit();
    }, delay);
}