在特定時間段內解除特定超時時間之間的緩解時間

Question

這是一種數學問題。我想在特定的時間段（比如說5秒）中觸發特定數量的setTimeout（該數字基於數組長度）。

第一個setTimeout應該從0 sec.開始，最後一個在5 sec.。所有超時之間應該以ease-in作用開始，以便每個超時開始更快。

有一個例子說明了我想要達到的目的。
我掙扎圍繞這條線：

next += timePeriod/3.52/(i+1); 

它工作在演示的例子（對於任何timePeriod）幾乎是完美的，但顯然它，因爲我已經使用靜態數量3.52不會爲不同的letters.length工作。

我該如何計算next？

var letters = [ 
 
    'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T' 
 
]; 
 

 
var div  = $('#container'); 
 
var timePeriod = 5000; // 5 seconds; 
 
var perLetter = timePeriod/(letters.length-1); // it gives equal time between letters 
 
var next  = 0; 
 

 
for(var i=0; i<letters.length; i++){ 
 
    setTimeout(function(letter){ 
 
    //div.append('<span class="letter">' + letter + '</span>'); 
 
    // Used "|" instead of letter, For better redability: 
 
    div.append('<span class="letter">|</span>'); 
 
    }, next, letters[i]); 
 
    
 
    // Can't find the logic here: 
 
    next += timePeriod/3.52/(i+1); 
 
    
 
}; 
 

 

 
///////////////// FOR DEMO: /////////////// 
 

 
var sec = timePeriod/1000; 
 
var secondsInterval = setInterval(seconds, 1000); 
 

 
var demoInterval = setInterval(function(){ 
 
    sec >= 0 || clearInterval(demoInterval); 
 
    div.append('\''); 
 
}, 30); 
 

 
function seconds(){ 
 
    sec || clearInterval(secondsInterval); 
 
    $('#sec').text(sec-- || 'DONE'); 
 
} 
 
seconds();

.letter{ 
 
    color : red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span id=container></span> 
 
<span id=sec class=letter></span>

Answer 1

var steps = letters.length; 
var target = timePeriod; 

function easeOutQuad(t, b, c, d) { 
    t /= d; 
    return -c * t*(t-2) + b; 
}; 

var arrayOfTimeouts = new Array(steps); 
var n; 
var prev = 0; 
for(var i = 1; i <= steps; i++){ 
    n = easeOutQuad(i, 0.0, target, steps); 
    arrayOfTimeouts[i-1] = n-prev; 
    prev = n; 
} 

這應該與任何輸入值工作。

fiddle

注意，圖形顯得稍微太快，但我認爲差異是計時瑕疵的產品，因爲我的數組的總和正好等於TIMEPERIOD。

more on easing equations

Answer 2

下面是基於一個幾何級數的解決方案。這有點愚蠢，但它的工作原理。它會根據超時值生成一個數組。

Steps =你的數組的大小。

Target =總時間。

var steps = 50; 
var target = 5000; 

var fraction = 1.5 + steps/7; 
var ratio = (fraction-1)/fraction; 
var n = target/fraction; 
var sum = 0; 
var arrayOfTimeouts = new Array(steps); 
for(var i = 0; i < steps; i++){ 
    sum += n; 
    arrayOfTimeouts[i] = n; 
    n *= ratio;    
} 

console.log(arrayOfTimeouts, sum);