I would like this countdown to start at 10 then count down to 1, but for the user to see it in real time - this script waits 50 seconds and then shows me all the numbers (1-10). What am I doing wrong here?
<body>
Countdown<br><br>
<div id="countdown">
<?php
for($i = 10; $i >= 1; $i--) {
echo $i;
sleep(5);
};
?>
</div>
<script>
setTimeout((document.getElementById('countdown').reload()),1000);
</script>
</body>
You are using server-side scripting for client-side things.
This looks like a job for javascript on the client side.
Sure you could use PHP to set the start value and interval, but any realtime on-screen action will be driven by client-side code.
What server-side scripting does is complete everything on the server and only after it has completed, serve the end result to the client.
So you won’t see the countdown happen on your screen, that happens on the server where you can’t see it. When it’s done, the server shows you what it already did while you were waititng for it.
As Sam said, wrong tools for the job. Here’s a very quick implementation in JavaScript.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>Countdown</title>
</head>
<body>
<div class="counter">10</div>
<script>
const counter = document.querySelector('.counter');
let num = 10;
const i = setInterval(() => {
num -=1;
counter.innerText = num;
if(num === 0) clearInterval(i);
}, 1000);
</script>
</body>
</html>
Here’s a slightly more involved tutorial if you wish to expand on this:
Thanks for the example, and I see why it needs to be client-side. Thanks everyone!
I don’t want to just jump in, be an ass, and necro a thread when you’ve already got your solution, but it would be nice to expand on why its your solution.
As much as the proposed solutions resolves your solution, those using the same keywords in search engines might stumble upon this topic, and it not work for them. So I’d like to expand a little on helping find the resolution to cater for more devs;
OG Question: I would like this countdown to start at 10 then count down to 1, but for the user to see it in real time - this script waits 50 seconds and then shows me all the numbers (1-10). What am I doing wrong here?
The keyword to your question there is start - whats the definition on start? When is your ideal of the countdown starting? @James_Hibbard’s solution is most certainly robust and ideal - but you must remember JS at the end of the document executes once when read. It does not execute when all assets are loaded, thus may execute prematurely.
I know this answer is superfluous to the question, but to add a bit of colour for those who may stumble upon it, you perhaps want to dress your code up with a “DOM Ready” event - or perhaps a document.fonts.ready event, specifically those prone or reliant to animated timings or with heavy assets such as fonts etc.
The original intention of the question being asked as a PHP question may also serve a different metric of start. In a fire and forget way, triggering a countdown X seconds after a request is a decent way to moderatre a number of requests on an API for example;
Should the OP use time as a metric to inhibit the user from performing an action, then a multiple of dimensions should be accomodated. The delta (value difference between two numbers) of a server request and a browser render is a good way to ensure that adverts are maybe observed for a minimum period of time for example.
For simple UI rate limiting; on page load event after 5 seconds to enable a button is also a cheap way to ensure some basic level of moderation on your application.
TL;DR the idea of start here isn’t always page render, and I provide this comment purely as food for thought.
Well, you are necro’ing the thread. But since you’re embarking on this journey, you perhaps should aim elsewhere.
“start” isnt the keyword in that question. it’s the phrase “in real time”. In pure PHP, that would be output buffering and flushing. Which is an alternative given the user’s requested structure, but Javascript is the correct solution path.
It’s simply another case of execution time confusion - PHP executes prior to the browser; Javascript executes after.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.