Einfache Jquery Countdown-Probleme

Question

Siehe Code unten. Der Timer funktioniert, aber die Minuten verringern sich schneller als die Sekunden. Die Minuten sollten nicht kleiner werden, bevor die Sekunden 0 erreichen. Wie kann ich die Minuten verringern, NACHDEM die Sekunden 0 erreichen?

(function($) { 
 
    function timer(time, update, complete) { 
 
    var start = new Date().getTime(); 
 
    var interval = setInterval(function() { 
 
     var now = time - (new Date().getTime() - start); 
 
     if (now <= 0) { 
 
     clearInterval(interval); 
 
     complete(); 
 
     } else update(Math.floor(now/1000)); 
 
    }, 0); 
 
    } 
 

 

 
    timer(
 
    300000, 
 
    function(timeleft) { 
 
     var min = Math.round(timeleft/60); 
 
     var sec = Math.round(timeleft/5); 
 

 
     $('.timer').html(min + " minutes " + sec + " seconds"); 
 
    } 
 
); 
 
})(jQuery);

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

Answer 1

Wenn Sie Ihren Timer sagen bei eine Minuten , Sie können nicht bei 59 Sekunden starten.
Verwenden setTimeout statt setInterval

berechnen Sekunden mit timeInSeconds % 60
nicht Set Timer (setTimeout in unserem Fall) zu 0 tun. Verwenden Sie etwas leistungsfreundlich wie 1000/60

(function($) { 
 

 
    /** 
 
    * timer - Countdown seconds from a provided ms value 
 
    * @param {Number} time - time in MS 
 
    * @param {function} update - Callback - returns time in seconds 
 
    * @param {function} complete - Callback - returns time in seconds on complete 
 
    */ 
 
    function timer(time, update, complete) { 
 

 
    var start = +new Date(), 
 
     timeout, now, sec; 
 

 
    (function tick() { 
 

 
     now = time - (+new Date() - start); 
 
     sec = Math.ceil(now/1000); 
 

 
     if (now <= 0) { 
 
     // STOP ticking! 
 
     clearTimeout(timeout); 
 
     // COMPLETE - Execute callback function (if provided) 
 
     if (complete && typeof complete === "function") complete(sec); 
 
     } else { 
 
     timeout = setTimeout(tick, 1000/60); // Recursive ticks... 
 
     } 
 

 
     // UPDATE - Execute callback function (if provided) 
 
     if (update && typeof update === "function") update(sec); 
 

 
    })(); // start ticking... (Thank you Timeout!) 
 

 
    } 
 

 
    timer(
 
    60000, 
 
    function(timeInSeconds) { 
 
     var min = Math.floor(timeInSeconds/60), 
 
      sec = timeInSeconds % 60; 
 
     $('.timer').html(min + " minutes " + sec + " seconds"); 
 
    }, function(timeInSeconds) { 
 
     console.log("DONE! " + timeInSeconds); 
 
    } 
 
); 
 

 
})(jQuery);

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

 
<span class=timer></span>

Answer 2

denke ich, Ihr Problem zu Math.round ist(), was über die Verwendung von ceil statt es?

EDIT: Vielleicht möchten Sie auch subtrahieren von 1, weil, wenn left 59 oder weniger ist, noch werden Minute 1.

(function($) { 
 
    function timer(time, update, complete) { 
 
    var start = new Date().getTime(); 
 
    var interval = setInterval(function() { 
 
     var now = time - (new Date().getTime() - start); 
 
     if (now <= 0) { 
 
     clearInterval(interval); 
 
     complete(); 
 
     } else update(Math.floor(now/1000)); 
 
    }, 0); 
 
    } 
 

 

 
    timer(
 
    300000, 
 
    function(timeleft) { 
 
     var min = Math.ceil(timeleft/60) - 1; 
 
     var sec = Math.round(timeleft/5); 
 

 
     $('.timer').html(min + " minutes " + sec + " seconds"); 
 
    } 
 
); 
 
})(jQuery);

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