I use below code to make a timer counter down, the console log works well (10,9,8,...) but I can't see the changes on the label
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
function sleep(miliseconds) {
var currentTime = new Date().getTime();
while (currentTime miliseconds >= new Date().getTime()) {
}
}
function counterDown(count) {
console.log("JLog: ", count);
if (count > 1) {
var lbl = document.getElementById('<%= lblTimer.ClientID %>');
lbl.innerText = count;
sleep(1000);
counterDown(count - 1);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<br /><br />
<asp:TextBox ID="txtUserName" runat="server" Height="20px" Width="120px"></asp:TextBox><br /><br />
<asp:TextBox ID="txtPassword" runat="server" Height="20px" Width="120px"></asp:TextBox><br /><br />
<asp:Button runat="server" OnClientClick="counterDown(10);" Text="Start Timer" />
<br /><br />
<asp:Label runat="server" id="lblTimer" Text="--"></asp:Label><br /><br />
</form>
</body>
</html>
Edit
I use below code as mention in the answers too, but doesn't work. Even the console log doesn't work
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:Button runat="server" OnClientClick="start(10);return false;" Text="Start Timer" />
<br /><br />
<asp:Label runat="server" id="lblTimer" Text="--" ClientIDMode="Static"></asp:Label><br /><br />
<script>
var mycount = 0
var myTimer
function start(count) {
mycount = count
$('#lblTimer').text(count)
myTimer = setInterval(MyTick, 1000)
}
function MyTick() {
mycount = mycount - 1
$('#lblTimer').text(mycount)
if (mycount <= 0) {
clearInterval(myTimer)
}
console.log("JLog: ", mycount);
}
</script>
</form>
</body>
</html>
How can I fix this problem!?
CodePudding user response：
Ok, the problem here is if you look (use) the f12 debug tools, you will indeed see the count down in the log. However, (and very sad of a gazillion examples on the web), they fail to mention that the web screen update and display DOES NOT update until the routine exits. When the js routine is done, then the screen updates to go work. In other words, while the label is being updated, it does not update the display in the browser until such time the routine is done. And there is no "do events" or command available in js code to say please update (show) pending updates to the browser.
As a result, you need to cook up a routine that updates the lable, and then is DONE!!!
So, you need to do it this way:
<asp:Button runat="server" OnClientClick="start(10);return false;" Text="Start Timer" />
<br /><br />
<asp:Label runat="server" id="lblTimer" Text="--" ClientIDMode="Static"></asp:Label><br /><br />
<script>
var mycount = 0
var myTimer
function start(count) {
mycount = count
$('#lblTimer').text(count)
myTimer = setInterval(MyTick, 1000)
}
function MyTick() {
mycount = mycount - 1
$('#lblTimer').text(mycount)
if (mycount <= 0) {
clearInterval(myTimer)
}
}
</script>
Also note, this in effect makes the code asynchronous. That means the routine start(10) will NOT wait, and thus you will not for example "hold off" or make the server side code for that button run (if you have any).
If that wait for 10 seconds is desired, and THEN the server side code is to run, then we have to add to the above code for that to work. Since the start() routine does now not wait, nor will any server side code event for that button wait (it will run on button click.). As noted, ask if you have code for that button, and you need (want) the server side event code you have attached to that button to wait for 10 seconds before the button click (code behind server side) is to run.
Example 2: Note as per above - browser js code does NOT update controls until code (routine called) has exited, and is done! So, we must use the settimer - this makes the routine exit, and get called each time per 1 second. The js code thus becomes asynchronous, and that allows the controls to be updated.
so, try this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
var mycount = 0
var myTimer
function start(count) {
mycount = count
var myLable = document.getElementById('<%= lblTimer.ClientID %>');
myLable.innerText = mycount
myTimer = setInterval(MyTick, 1000)
}
function MyTick() {
mycount = mycount - 1
var myLable = document.getElementById('<%= lblTimer.ClientID %>');
myLable.innerText = mycount
if (mycount <= 0) {
clearInterval(myTimer)
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtUserName" runat="server" Height="20px" Width="120px"></asp:TextBox><br /><br />
<asp:TextBox ID="txtPassword" runat="server" Height="20px" Width="120px"></asp:TextBox><br /><br />
<asp:Button runat="server" OnClientClick="start(10);return false;" Text="Start Timer" />
<br /><br />
<asp:Label runat="server" id="lblTimer" Text="--"></asp:Label><br /><br />
</div>
</form>
</body>
</html>