作者fillano (冒牌費大公)
看板Ajax
標題Re: [問題] 用JAVA函數控制圖片出現時間
時間Tue Jan 13 00:01:18 2009
不知道你們老師要你們做的，真的是javascript嗎，雖然覺得對於入門者實在有點超過。
恩，晚上試了一下做法，因為效率的關係，我用了三個setInterval來做，有一點像是
Thread：
<html>
<body>
<div id="panel">0</div>
<script>
(function(){
var a = document.getElementById("panel");
var duration = 10;
var action = [
[1, function(){a.innerHTML = '1';}],
[2, function(){a.innerHTML = '2';}],
[3, function(){a.innerHTML = '3';}],
[4, function(){a.innerHTML = '4';}],
[5, function(){a.innerHTML = '5';}],
[6, function(){a.innerHTML = '6';}],
[7, function(){a.innerHTML = '7';}],
[8, function(){a.innerHTML = '8';}],
[9, function(){a.innerHTML = '9';}]
];
var curr = start = new Date().getTime();
var timer = true;
var currTimeUpdater = window.setInterval(function(){
if(timer) {
curr = new Date().getTime();
} else {
window.clearInterval(currTimeUpdater);
}
},1);
var timerStop = window.setInterval(function(){
if ((curr - start) > duration*1000) {
timer = false;
window.clearInterval(timerStop);
}
},1);
var th = window.setInterval(function(){
if(timer) {
if(action.length>0 && (curr-start) > action[0][0]*1000) {
action[0][1]();
action.shift();
return;
}
} else {
window.clearInterval(th);
}
},1);
})();
</script>
</body>
</html>
大致上可以精確到秒。我沒測試更小的時間單位，理論上你可以用千分之一秒，Date
Object的getTime()傳回的也是千分之一秒，所以可以修改一下單位試試看。但是我想不
可能達到千分之一秒，而且setInterval最小也只能到千分之一秒，所以我想時間精確到
百分之一秒或更長也許比較不會出問題。
另一個問題是圖片載入跟render比較耗時，所以最好用ajax的方式預載比較保險。
action陣列裡面的的元素，也是一個陣列，這個陣列有固定格式，第一個是秒，第二個是
動作函數。可以用這個改來做你要的用途，例如更新圖片等。
簡單地說就是這樣，我在firefox3.0.5、Google Chrome 1.0、Webkit nightly build
r39553、ie7測試過，應該可行。不過圖片的效率我沒試，你自己來吧。
--
Sapere Aude! 這就是啟蒙運動的口號！
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 60.248.166.83
1F：→ fillano:用很小的圖測了一下，十分之一秒大概是極限了。大圖應該會 01/13 11:51
2F：→ fillano:更慢，所以...自己斟酌一下時間間隔。 01/13 11:52
3F：推 mlwmlw:節拍? 01/13 13:44
4F：推 billyllib:感謝大神! 01/13 17:38