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手風琴 - 跟蹤時間問題

回答

相關問題