在特定时间段内解除特定超时时间之间的缓解时间

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