Click here to Skip to main content
15,911,711 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am tryting to make use of setTimeout to show / hide element after particular time but its not working.

Kindly see m code here
Link to Code

What I have tried:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="connecting">Connecting...</div>
<div id="exchanging">Exchanging Private Token HandShake...</div>
<div id="access">Access Authorization Received!!!</div>
<div id="process">Looking up Availability</div>
<div id="phrazing">Phrazing Detection...</div>
<div id="processing">Processing Phrazed Detections...</div>
<div id="exporting">Exporting...</div>
<div id="redirecting">Redirecting...</div>


 <script type="text/javascript">
   $(function(){
showProcessing();
function showConnecting() {
  $('#connecting').show();
 setTimeout(function(){ hideConnecting();}, 30000);
}
function hideConnecting() {
  $('#connecting').hide();
   showPhrazing();
}
function showExchanging() {
  $('#exchanging').show();
  setTimeout(function(){ hideExchanging();}, 30000);
}
function hideExchanging() {
  $('#exchanging').hide();
  showExporting();
}
function showAccess() {
  $('#access').show();
  setTimeout(function(){ hideAccess();}, 30000);
}
function hideAccess() {
  $('#access').hide();
  showRedirecting();
}
function showProcess() {
  $('#process').show();
  setTimeout(function(){ hideProcess();}, 30000);
}
function hideProcess() {
  $('#process').hide();
  showRedirecting();
}
function showPhrazing() {
  $('#phrazing').show();
  setTimeout(function(){ hidePhrazing();}, 30000);
}

function hidePhrazing() {
  $('#phrazing').hide();
  showRedirecting();
}
function showProcessing() {
  $('#processing').show();
  setTimeout(function(){ hideProcessing();}, 30000);
}
function hideProcessing() {
  $('#processing').hide();
  showRedirecting();
}
function showExporting() {
  $('#exporting').show();
  setTimeout(function(){ hideExporting();}, 30000);
}
function hideExporting() {
  $('#exporting').hide();
  showRedirecting();
}
function showRedirecting() {
  $('#redirecting').show();
  setTimeout(function(){ hideRedirecting();}, 30000);
}
function hideRedirecting() {
  $('#redirecting').hide();
  setTimeout(function(){window.location = "export.html";}, 1000);
}
});
 </script>


Great help will be so much appreciated.
Posted
Updated 5-Feb-20 1:08am

1 solution

You don't need the <script> tag in the JS section so take that out. Your timer for the first process is set to 30 seconds, are you sure you're waiting 30 seconds? Reduce it to something like "3000" for testing. All of your divs are visible and will remain so as there is nothing hiding them so your code is just making things visible that are already visible. Add the attribute

style="display:none;"


to all of your divs.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900