Why timed javascript redirect fails?

Question

The following javascript redirect doesn't work - page just keeps requesting destination URL and the timer just goes to minus infinity. (Notice I use a meta refresh fallback for clients with no javascript support.)

 setInterval(function() {
     var span = document.querySelector("#counter");
     var count = span.textContent * 1 - 1;
     span.textContent = count;
     if (count <= 0) {
         window.location.replace("https://www.siliconharvest.com.au");
     }
 }, 1000);

<!DOCTYPE html>
<html>
   <head>
      <noscript>
         <meta http-equiv="refresh" content="500" />
      </noscript>
   </head>
   <body>
      <!-- template from https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_redirect
         redirect guide https://davidwalsh.name/meta-refresh-javascript
         htaccess re-write: https://stackoverflow.com/questions/20154805/rewrite-all-urls-to-http-domain-com
         countdown redirect: https://stackoverflow.com/questions/3292038/redirect-website-after-certain-amount-of-time?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa
         -->
      <p>We've been re-branded as "Silicon Harvest" and have moved to a new address!  The new URL is: <a href="https://www.siliconharvest.com.au">https://www.siliconharvest.com.au</a></p>
      <p>You will be redirected to the new address in <span id="counter" style="font-size:150%">5</span> seconds.</p>
      <p>If you are not redirected after 5 seconds, please click on the link above!</p>
     
   </body>
</html>

Aside: I use the meta refresh as a fallback only because it is [deprecated](https://davidwalsh.name/meta-refresh-javascript) and discouraged by the internet authorities. Javascript redirect should be effective in most cases as almost all clients support it. — , Jun 02 '18 at 20:17

score 1 · Accepted Answer · answered Jun 02 '18 at 20:22

Try stopping the interval before you redirect:

const timer = setInterval(function() {
     var span = document.querySelector("#counter");
     var count = span.textContent * 1 - 1;
     span.textContent = count;
     if (count <= 0) {
         clearInterval(timer);
         window.location.replace("https://www.siliconharvest.com.au");
     }
 }, 1000);

<!DOCTYPE html>
<html>
   <head>
      <noscript>
         <meta http-equiv="refresh" content="500" />
      </noscript>
   </head>
   <body>
      <!-- template from https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_redirect
         redirect guide https://davidwalsh.name/meta-refresh-javascript
         htaccess re-write: https://stackoverflow.com/questions/20154805/rewrite-all-urls-to-http-domain-com
         countdown redirect: https://stackoverflow.com/questions/3292038/redirect-website-after-certain-amount-of-time?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa
         -->
      <p>We've been re-branded as "Silicon Harvest" and have moved to a new address!  The new URL is: <a href="https://www.siliconharvest.com.au">https://www.siliconharvest.com.au</a></p>
      <p>You will be redirected to the new address in <span id="counter" style="font-size:150%">5</span> seconds.</p>
      <p>If you are not redirected after 5 seconds, please click on the link above!</p>
     
   </body>
</html>

Why timed javascript redirect fails?

1 Answers1