jQuery Countdown Each Second

Question

Я пытаюсь создать анимацию типа обратного отсчета jQuery, которая после того, как она достигает 0, выполняет функцию. Однако у меня проблемы, потому что я не уверен, как это сделать. Я думал, что сделаю цикл while, а затем приостановит на секунду, пока он не достигнет 0. Однако не представляется возможным приостановить цикл while. Так что мне интересно, что это лучший способ сделать это? Благодарю.

Answer 1

Код:

var counter = 10; 
var yourFunc = function(){} 
var interval = setInterval(function(){ 
    counter--; 
    if(counter <=0){ yourFunc(); clearInterval(interval); } 
}, 1000); 

Answer 2

Я хотел бы использовать рекурсивную функцию

var countDown = function(secondsRemaining){ 
    secondsRemaining -= 1; 
    if(secondsRemaining <= 0){ 
     //execute 
    } else { 
     //wait 1 second and call again 
     setTimeout(function(){ 
      countDown(secondsRemaining); 
     }, 1000); 
    } 
} 

затем первоначально начать обратный отсчет (5 секунд)

countDown(5000); 

Answer 3

• countdown принимает HTMLElement для отображения себя и количество секунд для подсчета

• Он возвращает обещание, которое решает, когда счетчик достигает 0

• Мы можем использовать .then вызов применить функцию, когда обратный отсчет завершен

function countdown(elem, s) { 
 
    return new Promise(function(resolve) { 
 
    function loop(s) { 
 
     elem.innerHTML = s 
 
     if (s === 0) 
 
     resolve(elem) 
 
     else 
 
     setTimeout(loop, 1000, s - 1) 
 
    } 
 
    loop(s) 
 
    }) 
 
} 
 
         
 
countdown(document.querySelector('#a'), 3).then(
 
    function(elem) { console.log('done', elem) } 
 
) 
 

 
countdown(document.querySelector('#b'), 5).then(
 
    function(elem) { console.log('done', elem) } 
 
) 
 

 
countdown(document.querySelector('#c'), 10).then(
 
    function(elem) { console.log('done', elem) } 
 
)

<p id="a"></p> 
 
<p id="b"></p> 
 
<p id="c"></p>

Вы также должны знать, что setTimeout и setInterval не гарантируют, что миллисекунд Используемый аргумент 100% точный & hellip;

var last = Date.now() 
 
var interval = setInterval(function() { 
 
    var now = Date.now() 
 
    var delta = now - last 
 
    console.log(delta) 
 
    last = now 
 
}, 1000) 
 

 
setTimeout(clearInterval, 10000, interval) 
 
// 1000 
 
// 1003 
 
// 998 
 
// 1002 
 
// 999 
 
// 1007 
 
// 1001 
 
// ...

Если вам нужен долго работает таймер с высокой точностью, я рекомендую вам адаптировать решение использовать обновление дельты основы с часами. Если вы полагаетесь на setTimeout или setInterval для точности, вам будет грустно.

function countdown(elem, ms) { 
 
    return new Promise(function(resolve) { 
 
    function loop(ms, last) { 
 
     let now = Date.now() 
 
     let delta = now - last 
 
     if (ms <= 0) { 
 
     elem.innerHTML = 0 
 
     resolve(elem) 
 
     } 
 
     else { 
 
     elem.innerHTML = (ms/1000).toFixed(3) 
 
     setTimeout(loop, 25, ms - delta, now) 
 
     } 
 
    } 
 
    loop(ms, Date.now()) 
 
    }) 
 
} 
 
         
 
countdown(document.querySelector('#a'), 3000).then(
 
    function(elem) { console.log('done', elem) } 
 
) 
 

 
countdown(document.querySelector('#b'), 5000).then(
 
    function(elem) { console.log('done', elem) } 
 
) 
 

 
countdown(document.querySelector('#c'), 10000).then(
 
    function(elem) { console.log('done', elem) } 
 
)

<p id="a"></p> 
 
<p id="b"></p> 
 
<p id="c"></p>

Answer 4

Вы ищете что-то вроде этого ОП?

Выполняется каждую секунду. Вы можете использовать clearInterval() так же, как я добавил в раздел комментариев, когда вы хотите его остановить.

var start = 10; // time to countdown from in seconds 
 
var interval = setInterval(
 
    function(){ 
 
    if (start == 0) { 
 
     complete(); 
 
     clearInterval(interval); 
 
    } 
 
    $(".update").html("<h4>Countdown "+start+"</h4>"); 
 
    start--; 
 
    }, 1000); 
 

 
function complete() { 
 
    console.log("called the callback, value of start is: "+start); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="update"> 
 
    
 
</div>

Answer 5

Я хотел бы использовать что-то вроде следующего:

$(document).ready(function(){ 
    var counter=10; 
    countDown(); 

    function countDown(){ 

    $('#showNumber').text(counter--); 
    if(counter>=0) 
     window.setTimeout(countDown,1000) 
    else 
     otherFunction(); 
    } 

    function otherFunction(){ 
    $('#showNumber').text('FINISHED!'); 
    } 

}); 

Answer 6

Попробуйте это. Это не требует jQuery.

var count = 5; // Number of times to run 'counter_function'. 

// Run 'counter_function' every second (1000ms = 1 second) 
var counter = setInterval(function(){ 
    counter_function() 
}, 1000); 

// The function to run when 'count' hits 0. 
var done_function = function() { 
    console.log('done'); 
} 

// The function to run at each interval. 
var counter_function = function() { 
    console.log('count'); 
    count--; 

    if(count === 0){ 
     done_function(); 
     clearInterval(counter); 
    } 
} 

Он будет печатать слово «счет» каждую секунду в течение 5 секунд, и в последнюю секунду он также распечатает «done».