Tengo la función de cuenta regresiva jquery con el siguiente código:
$.fn.countdown = function(toTime, callback){ let $el = $(this); var intervalId; let timeUpdate = () => { var now = new Date().getTime(); var distance = toTime - now; var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); if(distance < 0){ clearInterval(intervalId); } else{ var value = days + "<sup>d</sup> " + (hours > 9 ? hours : '0' + hours) + ":" + (minutes > 9 ? minutes : '0' + minutes) + ":" + (seconds > 9 ? seconds : '0' + seconds); $el.html(value); } if(callback) callback(); } timeUpdate(); intervalId = setInterval(timeUpdate, 1000); }; $('#my_div').countdown(new Date("Jun 23, 2022 22:37:25").getTime()); $('#my_div2').countdown(new Date("Jun 23, 2022 22:20:25").getTime()); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="my_div"></div> <div id="my_div2"></div>Ahora necesito agregar la función de devolución de llamada si el tiempo ha terminado. Mi idea es así:
$('#my_div').countdown(new Date("Jun 23, 2022 22:37:25").getTime(), function(){ callback: function() { alert("Counting Finish"); } });¿Hay alguna forma de implementar esa devolución de llamada?
Su código está casi allí, solo hay dos problemas. En primer lugar, debe invocar el argumento de callback de llamada desde el bloque de distance < 0 , ya que eso es lo que determina cuándo finaliza la cuenta regresiva. En segundo lugar, debe proporcionar un argumento de devolución de llamada real a la llamada de countdown() .
Tenga en cuenta que en el siguiente ejemplo hice las cuentas regresivas solo unos segundos desde la fecha actual para que la demostración sea más clara.
$.fn.countdown = function(toTime, callback) { let $el = $(this); var intervalId; let timeUpdate = () => { var now = new Date().getTime(); var distance = toTime - now; var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); if (distance < 0) { clearInterval(intervalId); callback && callback(); } else { var value = days + "<sup>d</sup> " + (hours > 9 ? hours : '0' + hours) + ":" + (minutes > 9 ? minutes : '0' + minutes) + ":" + (seconds > 9 ? seconds : '0' + seconds); $el.html(value); } } timeUpdate(); intervalId = setInterval(timeUpdate, 1000); }; var date1 = new Date(); date1.setSeconds(date1.getSeconds() + 5); $('#my_div').countdown(date1.getTime(), () => console.log('first countdown elapsed!')); var date2 = new Date(); date2.setSeconds(date2.getSeconds() + 10); $('#my_div2').countdown(date2.getTime(), () => console.log('second countdown elapsed!')); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="my_div"></div> <div id="my_div2"></div>