jQuery countdown function in IE

Question

I'm having a strange issue with IE8 and below where my countdown that's only supposed to fire once keeps fireing, something that doesn't happen in modern browsers. Is there any way to fix this? Thanks! The goal is to have a countdown start once an input is selected.

Code:

$("input").focus (function counter() {
  $("input").unbind('focus', counter);
  var count = 60;
  countdown = setInterval(function(){
    $(".clock p").html(count);
    if (count == 0) {
      $(".while-ticking").fadeOut(1000);
      $(".countdown-finished").fadeIn(1000);
    }
    else {
        count--;
    }
  }, 1000);
});

Answer 1

Try it this way:

$("input").focus(function() { counter(60) });

function counter(count) {
    $("input").unbind('focus');
    setTimeout(function(){
        $(".clock p").html(count);
        if (count == 0) {
            $(".while-ticking").fadeOut(1000);
            $(".countdown-finished").fadeIn(1000);
        }
        else {
            counter(count--);
        }
    }, 1000);
}

Edit: You need to create a loop for the counting down. So what i basicly do is starting with 60 wait a sec and recall the function again but then with 59.. etc. etc. when its 0 it doesnt call the function anymore so it stopt

Edit: I have test it the following and it worked :) counting down very well

<script type="text/javascript" src=".............../jquery-1.4.4.min.js"></script>
<script type="text/javascript">

    $(document).ready(function() {

        $("input").focus(function() { counter(60) });

    });

    function counter(count) {
        $("input").unbind('focus');
        $(".clock p").html(count);
        setTimeout(function(){
            if (count == 0) {
                $(".while-ticking").fadeOut(1000);
                $(".countdown-finished").fadeIn(1000);
            }
            else {
                console.log(count--);
                counter(count--);
            }
        }, 1000);
    }

</script>


<input type="text" />

<div class="clock">
    <p></p>
</div>