Timer counter down in javascript (ASP.Net)

Question

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!?

Albert D. Kallal · Accepted Answer · 2022-06-01 17:01:19Z

2

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>

edited Jun 1, 2022 at 17:01

answered Jun 1, 2022 at 6:15

Albert D. Kallal

50.1k3 gold badges41 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

SajjadZare Over a year ago

@albert-d-kallal Thank you for your response, I edited the question and added your code too but it doesn't work

Albert D. Kallal Over a year ago

Put your script after the button as I have

SajjadZare Over a year ago

I edited again, same problem

Albert D. Kallal Over a year ago

See my 2nd example I posted. As I clear stated, the label will NOT update until the code exits for that routine. Also, you need a return false in that asp.net button, else it will do a FULL page post-back when you click on that buttion, and that will do a full page post-back, and that will blow out all running code, and the whole page will be sent to the server, and then come back to the browser - at which point in time everything will be re-set to original state. So, when you click that button, and it calls the js routine, we ALSO need to have a return false, else that button will post back

Collectives™ on Stack Overflow

Timer counter down in javascript (ASP.Net)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related