IE中的jQuery倒计时功能

Question

我在使用 IE8 及以下版本时遇到了一个奇怪的问题，我的倒计时只应该触发一次，而这在现代浏览器中不会发生。有没有什么办法解决这一问题？谢谢！目标是在选择输入后开始倒计时。

代码：

$("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

试试这个方法：

$("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);
}

编辑： 您需要为倒计时创建一个循环。所以我基本上做的是从 60 等待一秒开始，然后再次调用该函数，然后再调用 59.. 等等，当它为 0 时，它不再调用该函数，所以它停止了

编辑： 我已经对其进行了以下测试，并且效果很好:)倒计时非常好

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