Search code examples
javascriptjqueryloopsintervalseasing

How to increase javascript loop delay with easing


I need to count up from 1 to 60 but i want to count up with an easing, so for example it would go from 1 to 30 with a 100ms delay, after that i need to increase the delay so the counting will gradually slow down when it reaches 60. This is what i got so far(not much):

var i = 0;
var interval = setInterval(function(){
    i += 1;
    console.log(i);
    if(i == 60) {
        clearInterval(interval);
    }
}, 100);

Solution

  • I'd use setTimeout(), something like this:

    var delay = 100, count = 0;
    function delayed () {
        count += 1;
        console.log(count);
        if (count > 30) {
            delay += 10;
        }
        if (count < 60) {
            setTimeout(delayed, delay);
        }
    }
    delayed();
    

    A live demo at jsFiddle.