Javascript 一段时间后提交表格

我有一张表格。我在那里做了以下事情：

在大图像完成加载后隐藏加载动画并显示大图像

运行一个函数，在一段时间（比如2分钟）后提交表单

用户仍可在期限（2分钟）之前提交表格。在这种情况下，他会得到警告

无论用户提交表单还是表单正在自动提交，我都会在提交表单之前执行一些任务。自从大图像加载以来，我一直在流逝时间。我把它保存在一个输入字段中，因为我需要时间。如果用户在自动提交前有超过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;
    }
});

和上面一样，

exam\u over（）

是：

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

---

但是

exam\u over（）

执行了两次！您能告诉我为什么吗？

我建议使用如下设置超时来处理自动提交：

setTimeout(milliseconds, callback);

对于提交前要执行的任务，您可以使用以下命令：

<form onsubmit="tasksToDo()"></form>

delay（）

是一种仅用于动画FX队列的jQuery方法，因此它仅适用于动画，除非您使用

队列（）

，否则它不适用于提交事件，但只使用超时会更容易

改变

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

到

---

让我们解释一下jQuery是如何工作的，我会让它变得简单，因为我们不需要详细介绍

jQuery允许您拥有队列，您可以在队列中推送函数，jQuery将执行第一个函数。默认情况下，有一个队列始终存在并且始终在运行，这就是FX队列。你可以使用它，也可以不使用它，这取决于你自己。

queue（）

和

delay（）

的第一个参数是队列名称，如果未设置，il将使用FX队列

这里没有什么神奇之处，很简单：通过调用

queue（fn（）{}）

您将在队列中堆叠一些函数。然后，如果队列没有运行，您将调用

myQueue.start（）

（如果您使用的是FX队列，则不调用），因此jQuery将执行第一个函数。这就是全部。当然，在第一个函数中，在完成后调用第二个函数，等等。。。这样队列就不会停止

关于

delay（）

这是一种模板函数。它只需在队列中堆叠一个函数，该函数将延迟调用下一个函数，就像调用

setTimeout（）

因此，特别是在您的情况下，如果您真的想使用jQuery队列，您必须这样做：

function start_exam(delay){
    // delaying the queue
    $('#RecordExamineeForm').delay(delay);
    // stacking the submit in the queue
    $('#RecordExamineeForm').queue(function(next){
        $('#RecordExamineeForm').submit();
        next();
    });
}

不要忘记调用下一个函数，否则队列将停止

---

关于队列，在您的情况下，我认为只使用函数

setTimeout

就足够了。

$（new Image（））。on（'load'…

将永远不会触发，因为没有源代码集，也没有要加载的内容。在

start\u test（）中有一个
控制台.log（）
）

函数。如果您所说的事件不会触发，我无法在控制台中获取任何信息，但我可以。这对我来说不是，也不应该->哦，实际上是这样，您正在使用prop（）设置源代码，但这是一种多么奇怪的方式。实际上，图像是经过编码的，带有

base64

：）

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

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

function start_exam(delay){
    // delaying the queue
    $('#RecordExamineeForm').delay(delay);
    // stacking the submit in the queue
    $('#RecordExamineeForm').queue(function(next){
        $('#RecordExamineeForm').submit();
        next();
    });
}