JavaScript手风琴 - 跟踪时间问题

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

var elapsedTicks = curTick - lastTick;

lastTick等于当调用函数的值，并且被接收的功能时curTick等于值。我不明白为什么我们在这里减去另一个。我无法想象这两个值之间有什么明显的时间差异。或者也许我错过了一些东西。每次单击菜单标题时是否只调用一次animate（）函数，或者多次调用animate（）函数来创建增量动画效果？

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

感谢您的任何回应。

来源

2010-05-29 JohnMerlino

lastTick等于当调用函数的值

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

所以curTick-lastTick通常会是约 33，但是如果浏览器由于其他东西同时发生而滞后，它可能会高得多。这就是为什么时间阅读必须完成。

更通常在这种代码，你会存储动画在一个变量开始的时间，并使用setInterval要检查它每隔一段时间，而不是每次都设置一个完整的新超时功能（尤其是设置来自字符串的超时，这是超级丑陋的）。

ETA：

然后运行动画（）函数，该函数经过当前时间

不。再看看设置超时的呼叫：

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

来源

2010-05-29 12:20:31 bobince

是的这是我不明白的“前”部分。用户点击标题，调用runAccordion方法，设置一些变量，然后setTimeout函数等待33毫秒，然后运行animate（）函数，它将当前时间（Date.getTime（））作为参数传递给我们调用lastTick。所以我的大脑在想，用户点击标题后，它会等待33毫秒，然后触发动画。这就是为什么我不明白lastTick可能等于先前调用的函数的值。 – JohnMerlino 2010-05-29 13:15:39

您是否在说新的Date（）。getTime（）会先计算出来，然后在调用animate（）之前发生33毫秒的时间？如果是这样的话，那么这个教程对我来说很有意义。 – JohnMerlino 2010-05-29 18:05:35

是的，调用'getTime（）'并将Number结果转换为String。然后它会在一个字符串中创建一些代码，包括该数字。当字符串创建后33ms时，超时会触发，从该字符串中生成的代码会执行。从Strings创建代码很糟糕，mmkay？ – bobince 2010-05-30 01:13:29

JavaScript手风琴 - 跟踪时间问题

回答

相关问题