Fiddle Demo

Question

我做了一个随机的＆＃34;微调器＆＃34;循环通过8个div并添加一个活动的类，如下所示：

//create random setTimeout time from 3sec to 5sec
var time = Math.floor(Math.random() * (5000 - 3000 + 1)) + 3000;
var exit = false;

function repeat(){
    //my code
    if(!exit){
        setTimeout(repeat, 50); 
    }
}

我的问题是，我希望函数重复慢慢结束，以创造更多的悬念。我想我可以通过从超时提高50来做到这一点，但我怎么能相应地做到这一点呢？

提前致谢！

Answer 1

你可以试试这个。

$('button').on('click', function(){
var time = Math.floor(Math.random() * (5000 - 3000 + 1)) + 3000;
var anCounter = 1;
var anState = "positive";
var exit = false;
//var time1 = 50000;
setInterval(function(){time = time-1000;}, 1000);
function repeat(){
    if(anCounter>7 && anState=="positive"){ anState="negative"}
    if(anCounter<2 && anState=="negative"){ anState="positive"}

    $('div[data-id="'+anCounter+'"]').addClass('active');
    $('div').not('div[data-id="'+anCounter+'"]').removeClass('active');

    if(anState=="positive"){anCounter++;}else{anCounter--;}
    if(!exit){
if(time <1000)
        setTimeout(repeat, 300);
  else if(time< 2000)
  setTimeout(repeat, 100);
  else setTimeout(repeat, 50);

    }
}

repeat();
setTimeout(function(){
exit=true;
},time);
});

Answer 2

一旦您知道需要退出流程（退出为真），您可以通过创建代码的宿舍线性序列来触发一些动画。通常这个动画的持续时间不应超过2秒。

Answer 3

Fiddle Demo

线性减速： //值只是一个例子：

在点击事件处理程序

var slowDown = 0;

在slowDown += 1;功能

repeat

将50+slowDown传递给setTimeout

曲线减速：

在点击事件处理程序中添加var slowDown = 1;
和var curveIndex = 1.05 + Math.random() * (0.2); // [1.05-1.25）
在slowDown *= curveIndex;功能

repeat

将50+slowDown传递给setTimeout

Answer 4

你走在正确的轨道上但是更容易检查你经过的时间并以固定的速率相应地增加。我将其设置为每次迭代增加50ms，但您可以将其更改为您喜欢的任何内容。

Fiddle Demo

<强>的Javascript

$('button').on('click', function() {
    var time = Math.floor(Math.random() * (5000 - 3000 + 1)) + 3000;
    var anCounter = 1;
    var anState = "positive";
    var elapsed = 0;
    var timer;

    function repeat(timeAdded) {
        if (anCounter > 7 && anState == "positive") {
            anState = "negative"
        }
        if (anCounter < 2 && anState == "negative") {
            anState = "positive"
        }

        $('div[data-id="' + anCounter + '"]').addClass('active');
        $('div').not('div[data-id="' + anCounter + '"]').removeClass('active');

        if (anState == "positive") {
            anCounter++;
        } else {
            anCounter--;
        }
        if (elapsed < time) {
            timer = setTimeout(function() {
                repeat(timeAdded + 50);
            }, timeAdded);
            elapsed += timeAdded;
        }
        else {
            clearTimeout(timer);
        }
    }

    repeat(0);
});

Answer 5

您可以向intTime添加一个名为function repeat的参数，在该功能中，您可以调整下一个超时，并使用新超时调用repeat函数。每次调用它都需要20毫秒的时间。但是，您可以通过更改中的20来调整增量 var slowDown=20;使用不同的号码。

var slowDown=20;
setTimeout ("repeat",50);

function repeat(intTime){
    //my code
    if(!exit){
        intTime=Math.floor (intTime)+slowDown;
        setTimeout(repeat(intTime), intTime); 
    }
}

然后你需要为退出创建另一个超时。

var time = Math.floor(Math.random() * (5000 - 3000 + 1)) + 3000;
var exit = false;

setTimeout ("stopSpinning",time);

function stopSpinning(){
   exit = true;
}

所以整个事情看起来应该是这样的

var slowDown=20;
var time = Math.floor(Math.random() * (5000 - 3000 + 1)) + 3000;
var exit = false;

setTimeout ("stopSpinning",time);
setTimeout ("repeat",50);

function repeat(intTime){
    //my code
    if(!exit){
        intTime=Math.floor (intTime)+20;
        setTimeout(repeat(intTime), intTime); 
    }
}

function stopSpinning(){
   exit = true;
}

相对于剩余时间减少setTimeout时间

5 个答案:

Fiddle Demo

Fiddle Demo