Question

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

在大图片加载完成后隐藏加载动画并显示大图像。
运行一段时间后（例如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;
    }
});

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

$(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);
}

Answer 2

我建议使用setTimeout处理自动提交，如下所示：

setTimeout(milliseconds, callback);

对于提交前的任务，你可以使用：

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

Answer 3

让我们解释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就足够了。

一段时间后提交表格

3 个答案: