Question

我已成功地在文本框中循环遍历一长串字符，然后逐个替换它们，并从数组中随机选取值。

我的问题是让时机正确。我想能够在X秒内完成动画，无论字符串长度如何，也就是如果动画需要2秒钟，它应该花费2秒钟，无论字符串是10个字符长还是300个。我想我的数学可能只是关闭，因为完成动画需要的时间超过2秒。

我可能更容易用小提琴来解释。 > Fiddle

我的循环看起来像：

var totalSeconds = 1000;
var stringLen = 100
setInterval(function(){
 ...
}, totalSeconds/(stringLen*1000));

除了时间问题，是否有比我更好的方法和/或是否有可以用来实现相同结果的库？

我看到了http://jschr.github.io/textillate/，但无法弄清楚如何在其中实现字符替换。（看起来它只是开箱即用的动画）。

Answer 1

由于https://developer.mozilla.org/en-US/docs/Web/API/Window.setInterval（

），您不想依赖setInterval

“delay是setInterval（）函数在每次调用func之前应该等待的毫秒数（千分之一秒）。与setTimeout一样，强制执行最小延迟。

相反，您可能需要一个循环来检测每次迭代之间经过的时间。

var interval = totalSeconds*1000/(stringLen)
var totalCount = 0;
var prev = new Date().getTime();

while(totalCount < stringLen) {
  var current = new Date().getTime();
  var passed = current - prev;
  prev = current;

 // passed is how much time has passed between intervals
 var count = passed / interval;
  for (var i =0; i< count; i++) {
    // change letter here...
  }
  totalCount += count;

  // Carry over remainder
  prev -= passed % interval;
}

这是未经测试的:)

按顺序替换文本框动画中的字符

1 个答案: