Как отсчитать 60 секунд после клика на кнопку?

Question

тоесть кликаем на кнопку

появляется текст - можно отправить через 60 сек

и число 60 меняется на 59 58

к 0

$(document).on('click', '.send', function(e){
  $(e.target).hide(0);
  $('p').show(0);
})

<button class="send">отправить повторно код</button>
<p style="display: none">можно отправить через <span data-time="60">60</span> сек</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

Через setInterval. Пример:

$(document).on('click', '.send', function(e){
  $(e.target).hide(0);
  $('p').show(0);
  
  
  let spanTime = $('span[data-time]');
  let time = Number(spanTime.data('time'));
  
  let intrvl = setInterval(function() {
    if (time == 0) {
     clearInterval(intrvl);
     $('p').hide();
     $('.send').show();
     
     spanTime.text(time);
     time = Number(spanTime.data('time'));
    }
    
    spanTime.text(time--)
  }, 1000)
})

<button class="send">отправить повторно код</button>
<p style="display: none">можно отправить через <span data-time="60">60</span> сек</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

const sendBtn = $('.send');
const output = $('[data-time]');

const showTime = (outputEl, time) => {
  outputEl.text(time);
};

const startTimer = (time) => {
  showTime(output, time);

  if (time === 0) {
    return;
  }

  setTimeout(() => {
    startTimer(time - 1);
  }, 1000);
};

sendBtn.click((e) => {
  sendBtn.hide();
  $('p').show();

  startTimer(60);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="send">отправить повторно код</button>
    <p style="display: none">
      можно отправить через <span data-time="60">60</span> сек
    </p>

БЛОГ НА HUSL

Как отсчитать 60 секунд после клика на кнопку?

Ответы (2 шт):