我正在通过8个div的循环，并添加一个类活跃这样一个随机的“微调”：相对setTimeout的时间缩短至剩余时间

//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点来做到这一点，但是我怎么能够在剩余时间内做到这一点？

在此先感谢！

来源

2016-06-07 ALSD Minecraft

使用'Date.now（）' –

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

来源

2016-06-07 05:19:24 Tal

你可以试试这个。

$('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); 
});

来源

2016-06-07 05:23:31 binariedMe

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

来源

2016-06-07 05:25:21 warkentien2

这工作，但它往往落在最后2-3广场所有时间，我该如何解决这个问题？（使用曲线减速） –

你的'var time = Math.floor（Math.random（）*（5000 - 3000 + 1））+ 3000;'只能获得3001和5001之间的值，所以它最终会下降，。 **修正1 **增加时间窗口：例如：6000 - 3000或6500 - 3000.（注意，您可以正确使用此方程的结果..：3001而不是6000-3000 +1）。 **修正2 **使用随机生成的曲线函数'var curveIndex = 1.05 + Math.random（）*（0.2）;''和'slowDown * = curveIndex;' – warkentien2

你是那种在正确的轨道上，但它会很容易检查你经过的时间内，以固定利率相应递增。我把它设置为每次迭代增加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); 
});

来源

2016-06-07 05:27:10 Deryck

可以称为intTime参数添加到您的function repeat和功能在里面可以调整下超时并调用复读功能与新的超时。每次调用它将花费20毫秒的时间。但是，您通过将
var slowDown=20;中的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; 
}

来源

2016-06-07 05:53:15

相对setTimeout的时间缩短至剩余时间

回答

Fiddle Demo

Fiddle Demo

相关问题