CODEWITHSUNDEEP
javascriptphp
Jake
Jake

Reputation: 151

Redirect to another page if current page took x seconds to load?

Just curious if this could be possible. I am using an API and a function can sometimes take quite awhile to complete or even times out depending how it feels. Is there a way (Either with PHP, Javascript etc.) to be able to stop the page from loading after X amount of seconds and re-direct to another page?

Specifically, I'm using a form which is posted to the API using the standard form post mechanism.

Upvotes: 2

Views: 196

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074385

Depending on what it is that delays the slow page's response, the browser may not tear down the previous page for some time after the form submission. That means you have the opportunity to use a setTimeout to do the redirect.

document.querySelector("selector-for-the-form").addEventListener("submit", function() {
    setTimeout(function() {
        location.href = "/path/to/redirect/to";
    }, 3000); // 3000 = three seconds
}, false);

That works for me on Chrome, Firefox, and IE when posting to this simple PHP page in my default setup, which does a five-second busy-wait:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Delayed</title>
<style>
body {
    font-family: sans-serif;
}
</style>
</head>
<body>
<?php
$end = time() + 5;
while (time() < $end) {
    // wait
}
?>
<p>Done: <?php echo $_POST["foo"]?></p>
</body>
</html>

Again, though, it depends on whether it takes several seconds for the API page to start sending data to the browser. If it's not caching, for instance, and starts sending a response right away but then takes a long time to finish sending its response, the browser may tear down the page and start building the new one.

Upvotes: 1

Related Questions