最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

jquery - How to increase javascript loop delay with easing - Stack Overflow

programmeradmin6浏览0评论

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

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);
Share Improve this question asked Nov 27, 2013 at 10:35 passatgtpassatgt 4,4425 gold badges43 silver badges56 bronze badges 2
  • 1 see jsfiddle/arunpjohny/7xfCg/1 ? – Arun P Johny Commented Nov 27, 2013 at 10:39
  • almost, but i need to slow down with an easing, like an animation: gsgd.co.uk/sandbox/jquery/easing – passatgt Commented Nov 27, 2013 at 10:47
Add a ment  | 

3 Answers 3

Reset to default 5

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.

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

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

发布评论

评论列表(0)

  1. 暂无评论