Блог

У меня странная проблема с 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);
});
  

Попробуйте это так:

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