IE中的jQuery倒计时功能 [英] jQuery countdown function in IE

问题描述

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

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.

代码：

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

推荐答案

尝试这种方式：

$("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时它不再调用该功能所以它停止

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

编辑：
我测试了以下内容并且工作正常:)倒计时

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>

这篇关于IE中的jQuery倒计时功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！