Форма представления после периода времени

Question

У меня есть форму. Я делаю следующее:

1. Скрыть анимацию загрузки, когда большое изображение завершило загрузку и отобразило большое изображение.
2. Запустите функцию, которая отправляет форму через определенный промежуток времени (скажем, 2 минуты).
3. Пользователь может отправить заявку до периода (2 минуты). В этом случае он получит предупреждение.
4. Если пользователь отправляет форму или форму автоматически отправляется, перед отправкой формы я выполняю определенную задачу. Я держу время с момента загрузки большого изображения. Я держу его в поле ввода, потому что мне нужно время. Если у пользователя есть более 1 минуты перед автоматической отправкой, я показываю подтверждение, уверен ли пользователь или может отправить форму через некоторое время.

Я использовал таймер обратного отсчета, который обрабатывал автоматическую отправку, но теперь я использую пользовательские счетные часы. Итак, я контролирую auto-submit. Но это не работает. Вот код, который работает правильно:

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

Как сделать этот код работает и как я могу изменить, чтобы выполнять задачи автосабмита форма? Я также должен выполнять задачи, которые я описал в начале моего вопроса. Заранее спасибо.

Update: Я изменил 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() является метод JQuery для анимация FX-очередь, поэтому она работает только для анимации, она не будет работать для события отправки, если вы не используете 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

Я бы рекомендовал обрабатывать autosubmission с SetTimeout, как это:

setTimeout(milliseconds, callback); 

Для задач ToDo перед представлением вы можете использовать это:

<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 было бы достаточно.