javascript - 减少在特定时间段内触发特定次数的超时之间的时间

Question

这是一道数学问题。我想在特定时间段(例如 5 秒)内触发特定数量的 setTimeout(该数量基于数组长度)。

第一个 setTimeout 应从 0 秒 开始，最后一个 setTimeout 应在 5 秒 开始。之间的所有超时都应以ease-in效果开始，以便每次超时开始得更快。

有一个例子可以准确地说明我想要实现的目标。
我正在这条线上挣扎:

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

它在演示示例中几乎完美工作(对于任何timePeriod)，但显然它不适用于不同的letters.length，因为我使用了静态数字3.52。

如何计算下一个？

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