ASP.NET/AJAX - Timer not working correct

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!

Answer 1

The problem was that Visual Studio hosted it on localhost. If you use ip-adress 127.0.0.1 instead of local host within the URL it worked fast. I guess this won't be a problem on faster machines, sadfully I had none at that time.

EDIT: Adding a bounty on this question was a mistake, sorry about that.

Answer 2

since timer is processing the page asynchronously, and the button click event takes time for processing on the server, the timer event still fires in between the button click event and hence the timer keeps counting back for a second or two. Use Java script to set the label to 30 on client side as soon as the reset button is clicked. Upon timer click event, decrement the label value (not the timer) and assign to the label the new value. No need for timer int variable. Also on page load, assign the label value only if the page is not postback (i.e. IsPostback is false) as we want to load label value only on first time the page is rendered. Rest of the time, the timer click event will assign the value.