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