Question

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

第一个setTimeout应该从0 sec.开始，最后一个5 sec.开始。所有超时都应以 ease-in 效果开始，以便每次超时开始得更快。

有一个例子说明了我想要达到的目标我在这条线上挣扎：

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

在演示示例中（对于任何timePeriod）几乎都是完美的，但显然它不适用于不同的letters.length，因为我使用了静态数3.52。< / p>

如何计算 next ？

＆＃13;

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

＆＃13;

.letter{
  color : red;
}

＆＃13;

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

＆＃13;

Answer 1

这是基于几何系列的解决方案。它有点傻，但它有效。它会生成一个包含超时值的数组。

步数=数组的大小。

目标=总时间。

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

Answer 2

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。

缩短在特定时间段内触发特定超时次数之间的时间

2 个答案: