Счетчик Jquery показывает ноль после сброса

Я использую JQuery для настройки счетчика с 60, и он отлично работает. за исключением случаев, когда он отсчитывает первый раунд и достигает нуля, когда я его сбрасываю, он сначала показывает ноль, а затем снова начинается с 60. Я хочу, чтобы он сразу запускался с 60 после сброса. Есть идеи? вот мой код (это пример кода, который дает тот же результат, что и мой исходный код)

    $("#Resend-confirm-phone-number-code").hide();
    var count = 60,
        timer = setInterval(function () {
            $("#counter").html(--count);
            if (count == 0) {
                clearInterval(timer);
                $("#resend").fadeOut("fast", function () { });
                $("#Resend-confirm-phone-number-code").fadeIn("fast", function () { });
            }
        },
            1000);
    $("#resend").show();
    function aliAsghar() {
        $("#Resend-confirm-phone-number-code").hide();
        var count = 60,
            timer = setInterval(function () {
                $("#counter").html(--count);
                if (count == 0) {
                    clearInterval(timer);
                    $("#resend").fadeOut("fast", function () { });
                    $("#Resend-confirm-phone-number-code").fadeIn("fast", function () { });
                }
            },
                1000);
        $("#resend").show();
    }

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "newRegister-addCode" id = "confirmPhoneNumberForm-modal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel"
        aria-hidden = "true">
        <div class = "newRegister-helpText">
            <p>
                enter the code
            </p>
        </div>
        <form class = "newRegister-formBox" method = "Post" id = "confirmPhoneNumberForm" autocomplete = "off">
            <div class = "formElement newRegister-input">
                <i class = "fa fa-key"></i>
                <input autocomplete = "off" type = "text" name = "code" id = "code" class = "form-control persianDigitInput"
                    placeholder = "enter the code">
                <div class = "newRegister-alarmText">
                    
                    <p id = "resend"> seconds left<span id = "counter" >60</span></p>  
                    
                    <button class = "animateBtn" type = "button" id = "Resend-confirm-phone-number-code" style = "Display:none; " onclick = "aliAsghar()">
                        <i class = "fa fa-refresh"></i>
                        send again
                    </button>
    
                </div>
            </div>
            <div class = "newRegister-button">
                <button type = "button" id = "send-confirm-phone-number-code" class = "animateBtn" >
                    <i class = "fa fa-check"></i>
                    submit
                </button>
            </div>
        </form>
    </div>

Не могли бы вы создать скрипку для того же?

— 09.04.2019 11:24

@SmitRaval всегда предпочтительнее иметь работающий фрагмент здесь, а не за пределами сайта.

— 09.04.2019 11:26

Я добавил html-код

— 09.04.2019 11:34

javascript jquery

09.04.2019 11:22

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

144

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете решить эту проблему, немедленно обновив HTML-код элемента значением count при первом вызове функции и до того, как произойдет первая итерация интервала.

Затем вы можете высушить логику, просто вызвав aliAsghar() при загрузке страницы, вместо того, чтобы дважды копировать одну и ту же логику на страницу.

Обратите внимание на использование ненавязчивого обработчика событий над атрибутами событий on* в HTML, которого следует по возможности избегать, а также на удаление пустых функций обратного вызова в вызовах fadeX(), которые не являются обязательными.

function aliAsghar() {
  $("#Resend-confirm-phone-number-code").hide();
  var count = 5; // set to 5 just to speed up testing
  $("#counter").html(count);

  var timer = setInterval(function() {
    $("#counter").html(--count);
    if (count == 0) {
      clearInterval(timer);
      $("#resend").fadeOut("fast");
      $("#Resend-confirm-phone-number-code").fadeIn("fast");
    }
  }, 1000);
  $("#resend").show();
}

aliAsghar(); // onload
$('#Resend-confirm-phone-number-code').click(function() {
  aliAsghar();
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "newRegister-addCode" id = "confirmPhoneNumberForm-modal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true">
  <div class = "newRegister-helpText">
    <p>
      enter the code
    </p>
  </div>
  <form class = "newRegister-formBox" method = "Post" id = "confirmPhoneNumberForm" autocomplete = "off">
    <div class = "formElement newRegister-input">
      <i class = "fa fa-key"></i>
      <input autocomplete = "off" type = "text" name = "code" id = "code" class = "form-control persianDigitInput" placeholder = "enter the code">
      <div class = "newRegister-alarmText">
        <p id = "resend"> seconds left<span id = "counter">60</span></p>
        <button class = "animateBtn" type = "button" id = "Resend-confirm-phone-number-code" style = "Display:none;">
          <i class = "fa fa-refresh"></i>
          send again
        </button>
      </div>
    </div>
    <div class = "newRegister-button">
      <button type = "button" id = "send-confirm-phone-number-code" class = "animateBtn">
        <i class = "fa fa-check"></i>
        submit
      </button>
    </div>
  </form>
</div>

09.04.2019 11:38

Просто установите: $('#counter').text( "60" );

$("#Resend-confirm-phone-number-code").hide();
$('#counter').text( "60" );
var count = 60,
    timer = setInterval(function () {
        $("#counter").html(--count);
        if (count == 0) {
            clearInterval(timer);
            $("#resend").fadeOut("fast", function () { });
            $("#Resend-confirm-phone-number-code").fadeIn("fast", function () { });
        }
    },
        1000);
$("#resend").show();
function aliAsghar() {
    $("#Resend-confirm-phone-number-code").hide();
    $('#counter').text( "60" );
    var count = 60,
        timer = setInterval(function () {
            $("#counter").html(--count);
            if (count == 0) {
                clearInterval(timer);
                $("#resend").fadeOut("fast", function () { });
                $("#Resend-confirm-phone-number-code").fadeIn("fast", function () { });
            }
        },
            1000);
    $("#resend").show();
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "newRegister-addCode" id = "confirmPhoneNumberForm-modal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel"
    aria-hidden = "true">
    <div class = "newRegister-helpText">
        <p>
            enter the code
        </p>
    </div>
    <form class = "newRegister-formBox" method = "Post" id = "confirmPhoneNumberForm" autocomplete = "off">
        <div class = "formElement newRegister-input">
            <i class = "fa fa-key"></i>
            <input autocomplete = "off" type = "text" name = "code" id = "code" class = "form-control persianDigitInput"
                placeholder = "enter the code">
            <div class = "newRegister-alarmText">

                <p id = "resend"> seconds left<span id = "counter" ></span></p>  

                <button class = "animateBtn" type = "button" id = "Resend-confirm-phone-number-code" style = "Display:none; " onclick = "aliAsghar()">
                    <i class = "fa fa-refresh"></i>
                    send again
                </button>

            </div>
        </div>
        <div class = "newRegister-button">
            <button type = "button" id = "send-confirm-phone-number-code" class = "animateBtn" >
                <i class = "fa fa-check"></i>
                submit
            </button>
        </div>
    </form>
</div>

Чтобы упростить код, вы можете просто вызвать функцию:

/*$("#Resend-confirm-phone-number-code").hide();
$('#counter').text( "60" );
var count = 60,
    timer = setInterval(function () {
        $("#counter").html(--count);
        if (count == 0) {
            clearInterval(timer);
            $("#resend").fadeOut("fast", function () { });
            $("#Resend-confirm-phone-number-code").fadeIn("fast", function () { });
        }
    },
        1000);
$("#resend").show();*/
aliAsghar();
function aliAsghar() {
    $("#Resend-confirm-phone-number-code").hide();
    $('#counter').text( "60" );
    var count = 60,
        timer = setInterval(function () {
            $("#counter").html(--count);
            if (count == 0) {
                clearInterval(timer);
                $("#resend").fadeOut("fast", function () { });
                $("#Resend-confirm-phone-number-code").fadeIn("fast", function () { });
            }
        },
            1000);
    $("#resend").show();
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "newRegister-addCode" id = "confirmPhoneNumberForm-modal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel"
    aria-hidden = "true">
    <div class = "newRegister-helpText">
        <p>
            enter the code
        </p>
    </div>
    <form class = "newRegister-formBox" method = "Post" id = "confirmPhoneNumberForm" autocomplete = "off">
        <div class = "formElement newRegister-input">
            <i class = "fa fa-key"></i>
            <input autocomplete = "off" type = "text" name = "code" id = "code" class = "form-control persianDigitInput"
                placeholder = "enter the code">
            <div class = "newRegister-alarmText">

                <p id = "resend"> seconds left<span id = "counter" ></span></p>  

                <button class = "animateBtn" type = "button" id = "Resend-confirm-phone-number-code" style = "Display:none; " onclick = "aliAsghar()">
                    <i class = "fa fa-refresh"></i>
                    send again
                </button>

            </div>
        </div>
        <div class = "newRegister-button">
            <button type = "button" id = "send-confirm-phone-number-code" class = "animateBtn" >
                <i class = "fa fa-check"></i>
                submit
            </button>
        </div>
    </form>
</div>

09.04.2019 11:39

Другие вопросы по теме

Скрытие столбца с помощью column().visible() в таблице данных не работает

Как открыть модальное частичное представление при нажатии строки таблицы данных?

Предложение по вводу: получить идентификатор вместо значения и передать идентификатор с URL-адресом

Получить текст из таблицы HTML и поместить его в предопределенную строку

Как отображать веб-сайт, только если его разрешение выше определенного?

Код jQuery noConflict() не имеет смысла

Функция AJAX вызывается первой еще до нажатия первой строки кнопки jQuery, почему?

Отключение позиции: исправлено при прокрутке, когда 250 пикселей от нижней части страницы

Проверка переключателя в многоэтапной форме

Как отобразить все значения массива в разных областях ввода текста?

Счетчик Jquery показывает ноль после сброса

Ответы 2

Другие вопросы по теме

Похожие вопросы