javascript 手风琴 - 跟踪时间问题

Question

我正在阅读这个 javascript 教程： http://www.switchonthecode.com/tutor...ccordion-menus 基本上，它向您展示了如何使用纯 javascript 而不是 jquery 创建手风琴。在跟踪动画的实际部分之前，所有这些对我来说都是有意义的。他说：“正因为如此，我们在动画函数中做的第一件事就是计算出自上次动画迭代以来已经过去了多少时间。” 然后使用这段代码： 代码：

var elapsedTicks = curTick - lastTick;

lastTick 等于调用函数时的值（Date().getTime()），curTick 等于接收到函数时的值。我不明白为什么我们要在这里减去一个。我无法想象这两个值之间有任何明显的时间差异。或者也许我错过了一些东西。 animate() 函数是仅在每次单击菜单标题时调用一次，还是调用多次以创建增量动画效果？

setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'" + openAccordion + "','" + nID + "')", 33); 

感谢您的任何回复。

Answer 1

lastTick 等于调用函数时的值

lastTick 等于在动画的最后一帧先前调用该函数时的值。此后，脚本将控制权交还给浏览器，并要求在 33 毫秒内回调。

因此，curTick-lastTick 通常大约 33，但如果浏览器由于同时发生其他事情而出现延迟，则该值可能会更高。这就是为什么必须进行时间阅读的原因。

更常见的是，在此类代码中，您会将动画开始的时间存储在变量中，并使用setInterval经常检查它，而不是设置完整的时间每次都有新的超时函数（特别是从字符串设置超时，这是超级丑陋的）。

预计到达时间：

然后运行 ​​animate() 函数，该函数传递当前时间

。再看一下 set-timeout 调用：

setTimeout("animate(" + new Date().getTime() + ","...

这正在创建一个字符串。 new Date().getTime() 在超时设置时间评估，而不在超时调用时间评估。它最终会生成一个如下字符串：

setTimeout("animate(1275139344177, 250, 'Accordion4Content', 'Accordion4Content')", 33)

这是最后一帧结束时的时间，而不是下一帧超时的时间。

像这样将 JavaScript 代码放入字符串中是非常令人困惑的，并且充满了转义问题，并且通常被认为是非常糟糕的做法。使用内联函数会更清楚：

var passTick= new Date().getTime();
setTimeout(function() {
    animate(passTick, TimeToSlide, openAccordion, nID);
}, 33);