AJAX - ASP.NET - Timer delay problem

Question

I'm trying to make an webapplication where you see an Ajax countdown timer. Whenever I push a button the countdown should go back to 30 and keep counting down.

Now the problem is whenever I push the button the timer keeps counting down for a second or 2 and most of the time after that the timer keeps standing on 30 for to long.

WebForm code:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Label ID="Label1" runat="server" Text="geen verbinding"></asp:Label>
        <br />
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
        <br />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
    </Triggers>
</asp:UpdatePanel>
<asp:Timer ID="Timer1" runat="server" Interval="1000" ontick="Timer1_Tick">
</asp:Timer>

</form>

Code Behind:

static int timer = 30;
protected void Page_Load(object sender, EventArgs e)
{
    Label1.Text = timer.ToString();
}
protected void Timer1_Tick(object sender, EventArgs e)
{
    timer--;

}
protected void Button1_Click(object sender, EventArgs e)
{
    timer = 30;         
}

Hope somebody knows what the problem is and if there is anyway to fix this.

Thanks in advance!

The starting is ok, thats not the problem. The problem is that the timer doesn't react correctly on the button click. I need those to be perfectly the same (the client timer and server timer), and when the button is clicked the server timer should move back to 30, so that would be the same for the client timer) — Julian
– Julian, Commented Apr 23, 2010 at 8:38

Daniel Dyson · Accepted Answer · 2010-04-23 08:26:34Z

1

Why don't you implement the Timer entirely on the ClientSide? Can you explain why it has to be a callback? What does it need to do on the Server?

<script type="text/javascript" language="javascript">
var timer = 0;
function resetTimer() {
    timer = 0;
    timerTick();
}
function timerTick() {
    var target = document.getElementById("timerResult");

    target.innerHTML = timer++;
    window.setTimeout("timerTick()", 1000);
}
</script>

And in the body tag...

<body onload="timerTick();">

And somewhere to display

<div id="timerResult" >timerResult</div>

You justy have to add a button chich calls resetTimer(). I'll leave that to you

edited Apr 23, 2010 at 8:26

answered Apr 23, 2010 at 8:15

Daniel Dyson

13.2k6 gold badges45 silver badges73 bronze badges

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

1 Comment

Julian Over a year ago

I've a timer on server side and the client timer needs to be corrected every second by the server timer.

Collectives™ on Stack Overflow

AJAX - ASP.NET - Timer delay problem

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related