Простое время между увольнением определенного количества таймаутов за определенный период времени

Question

Это своего рода математическая проблема. Я хочу уволить определенное число setTimeout (число основано на массиве ) в течение определенного периода времени (скажем, 5 секунд).

Первый setTimeout должен начинаться с 0 sec., а последний - 5 sec.. Все таймауты между ними должны начинаться с эффекта ease-in, чтобы каждый таймаут начинался быстрее.

Есть пример, который иллюстрирует то, что я хочу достичь именно.
Я изо всех сил вокруг этой линии:

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

, который работает почти идеально в демонстрационном примере (для любого timePeriod), но очевидно, что он не работает для другого letters.length, как я использовал статический номер 3.52.

Как рассчитать 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

Вот решение, основанное на геометрической прогрессии. Это немного тупой, но он работает. Он генерирует массив с вашими значениями таймаута.

Шаги = размер вашего массива.

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