Изначально имеется ajax форма, при клике на сабмит с параметром
onclick="getUniqId();" - ниже появляется div блок с уникальным id, в котором запускается прогресс бар и доходит до 100% за 20 секунд. Все работает отлично, но задача состоит в том чтобы при повторном нажатии на сабмит прогресс бар в первом блоке был неизменным.
Сейчас есть две проблемы: первая, когда первый прогресс бар успешно завершился и я создаю второй - прогресс бар на первом блоке снова запускается и идет вместе со вторым.
И вторая проблема, если нажать на сабмит два раза с коротким промежутком времени - проценты в прогресс барах скачут.
Я думаю что проблема в функции
loaderInir(uniqId);, т.к в ней неуникальные переменные и они конфликтуют сами с собой. Подскажите пожалуйста как решить данную проблему или хотя-бы дайте нужное направление.
function loaderInit(uniqId) {
start = new Date();
maxTime = 20000;
timeoutVal = Math.floor(maxTime/100);
stopUpdate = false;
animateUpdate(uniqId);
function animateUpdate(uniqId) {
if (stopUpdate) {
return;
}
now = new Date();
timeDiff = now.getTime() - start.getTime();
perc = Math.round((timeDiff/maxTime)*100);
if (perc <= 90) {
updateProgress(perc, uniqId);
setTimeout(animateUpdate, timeoutVal, uniqId);
}
}
}
function updateProgress(percentage, uniqId) {
$('#progressbar-' + uniqId + '>.ui-widget-header').css('width', percentage + '%');
$('#progress_qty-' + uniqId).text(percentage + '%');
}
function getUniqId() {
uniqId = Math.round(new Date().getTime() + (Math.random() * 100));
addAccountBlock(uniqId);
}
function addAccountBlock(uniqId) {
$('.articles_container').prepend($('.create_hidden_block').clone().show().removeClass('create_hidden_block').prop('id', uniqId));
$('#' + uniqId + '>.progressbar_block>.progressbar').prop('id', 'progressbar-' + uniqId);
$('#' + uniqId + '>.progressbar_block>.progress_qty').prop('id', 'progress_qty-' + uniqId);
loaderInit(uniqId);
//дальше вызывается функция Juqery Ajax Form
//если все ок, прогресс бар останавливается и обновляется до 100%
stopUpdate = true;
updateProgress(100, uniqId);
//если ошибки просто останавливается и выводятся ошибки
stopUpdate = true;
}