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);

  • Simulate gravitational pull on a body in orbit
  • jQuery Slide Up Linear Easing First Step Does Nothing
  • Create Custom Easing using Javascript
  • Animate/Ease an element to position when other elements disappear
  • Calculate GSAP eased tween duration given desired starting velocity
  • Smooth character movement in canvas game using keyboard controls
  • Smooth character movement in canvas game using keyboard controls
  • Simulate gravitational pull on a body in orbit
  • Calculate GSAP eased tween duration given desired starting velocity
  • jQuery Slide Up Linear Easing First Step Does Nothing
  • Animate/Ease an element to position when other elements disappear
  • jQuery.easing - easeOutCubic - emphasizing on the ease
  • 3 Solutions collect form web for “How to increase javascript loop delay with easing”

    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.

    Here’s something you can use. A bit of mathematics in action

    var i = 0, a = 0;
    var interval = setInterval(function(){
        i += 1;
        a = parseInt(Math.log(i)*Math.log(i)*100, 10);
        print(i, a);
        if(i == 60) {
            clearInterval(interval);
        }
    }, 100);
    
    function print(i, a){
        setTimeout(function(){
            console.log(i)
        },a);
    }
    

    Basically, the value of a will increase gradually. You can observe very minor difference in time the count of i prints

    Why not slow down continuously? Looks much nicer in my opinion. I updated the answer of @Teemu accordingly. See this fiddle.

    var delay = 0, count = 0;
    function delayed () {
        count += 1;
        console.log(count);
        //adjust to influence overall speed
        delay+=5; 
        if (count <60) {
            setTimeout(delayed, delay);
        }
    }