Как показать статус прогресса и автоматическое перенаправление страницы, используя js?

Question

Я хотел бы знать, как я могу автоматически скрывать некоторые контейнеры и использовать тайм-аут для отображения статуса выполнения. После завершения он должен выполнить автоматическое перенаправление страницы c, используя JavaScript. Это мой подход до сих пор:

<div id="processing">Processing...</div>
<div id="Phrazing...">Phrazing...</div>
<div id="Exporting">Exporting...</div>
<div id="Redirecting">Redirecting...</div>

<div id="processing">Processing...to show and disapear for certain seconds, then followed by:</div>
<div id="Phrazing...">Phrazing...to show and disapear for certain seconds, then followed by:</div>  
<div id="Exporting">Exporting...to show and disapear for certain seconds, then followed by:</div>
<div id="Redirecting">Redirecting...to show and disapear for certain second the also redirectes a web page export.html </div>

Answer 1

Вы можете использовать setTimeout, чтобы показать / скрыть элемент после определенного времени. Ниже приведен код, где вы можете вызывать конкретную c функцию из setTimeout и показывать ее последовательно

$(function(){
showProcessing();
function showProcessing() {
  $('#processing').show();
 setTimeout(function(){ hideProcessing();}, 3000);
}

function hideProcessing() {
  $('#processing').hide();
   showPhrazing();
}

function showPhrazing() {
  $('#Phrazing').show();
  setTimeout(function(){ hidePhrazing();}, 3000);
}

function hidePhrazing() {
  $('#Phrazing').hide();
  showExporting();
}

function showExporting() {
  $('#Exporting').show();
  setTimeout(function(){ hideExporting();}, 3000);
}

function hideExporting() {
  $('#Exporting').hide();
  showRedirecting();
}

function showRedirecting() {
  $('#Redirecting').show();
  setTimeout(function(){ hideRedirecting();}, 3000);
}

function hideRedirecting() {
  $('#Redirecting').hide();
  setTimeout(function(){window.location = "export.html";}, 1000);
}

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="processing" style="display:none">Processing...</div>
<div id="Phrazing" style="display:none">Phrazing...</div>  
<div id="Exporting" style="display:none">Exporting...</div>
<div id="Redirecting" style="display:none">Redirecting...to export.html </div>