我正在通過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

相關問題