如何通过缓动增加javascript循环延迟

时间:2013-11-27 10:35:22

标签: javascript jquery loops intervals easing

我需要从1到60计数但是我想要计算一个缓和,所以例如它将从1到30以100ms延迟,之后我需要增加延迟以便计数将逐渐当它达到60时减速。这是我到目前为止(不多):

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

3 个答案:

答案 0 :(得分:5)

我会使用setTimeout(),如下所示:

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

答案 1 :(得分:3)

为什么不连续减速?在我看来看起来好多了。我相应地更新了@Teemu的答案。请参阅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);
    }
}

答案 2 :(得分:2)

这是你可以使用的东西。一些数学在行动

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

基本上,a的价值会逐渐增加。您可以观察到i打印次数

的时间差异很小