MozTW 討論區
https://forum.moztw.org/

Firefox 3.0.3 在執行Javascript的setTimeout時出現以下問題...
https://forum.moztw.org/viewtopic.php?f=13&t=24594		 第 1 頁 (共 1 頁)
發表人:  kaneintku [ 2008-10-02, 23:55 ]
文章主題 :  Firefox 3.0.3 在執行Javascript的setTimeout時出現以下問題...
代碼:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-tw">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Big5">
<title>淡入及淡出</title>
<style type="text/css">
#fade{
   opacity:1;
   filter: alpha(opacity=100);
}
</style>
<script type="text/javascript">
addLoadListener(init);

function addLoadListener(fn){
    window.onload = fn;
}

function init(){
   img = document.getElementById("fade");
   
   if(typeof img.style.opacity != "undefined"){
      browser = "firefox";
      img.style.opacity = 1;
   }else if(typeof img.filters.alpha.opacity == "number"){
      browser = "ie";
      //img.filters.alpha.opacity = 100;
   }
   
   fadeout();
}

function fadeout(){
   if(img.style.opacity > 0){
      img.style.opacity -= 0.1;
      setTimeout('fadeout()', 100);
   }else if(img.style.opacity == 0){
      fadein();
   }
/*
   if(img.filters.alpha.opacity > 0){
      img.filters.alpha.opacity -= 10;
      setTimeout('fadeout()', 100);
   }else if(img.filters.alpha.opacity == 0){
      fadein();
   }
*/
}

function fadein(){   
   if(img.style.opacity < 1){
      img.style.opacity += 0.1;
      setTimeout('fadein()', 100);
   }
/*
   if(img.filters.alpha.opacity < 100){
      img.filters.alpha.opacity += 10;
      setTimeout('fadein()', 100);
   }
*/
}
</script>
</head>
<body>
<img src="img10.bmp" id="fade">
<div id="output"></div>
</body>
</html>


這個網頁原本是要拿來設計成，
1.先判斷使用者是用何種瀏覽器，
2.再依據IE或FF執行所屬的程式碼
3.先將圖片img10.bmp淡出之後再淡入

但用FF跑這個程式碼時，
只跑到function fadein()的img.style.opacity += 0.1;這一行，
下一行的setTimeout卻無法執行。

若將註解區的程式碼反註解(註解區的程式碼是給IE跑的)，
再用IE跑卻OK。(我是用IE 6.0)

我想問的是在FF環璄下，
是不是function fadein()裡的setTimeout中的函式參數不是這樣子寫的?

因為我若將該行改為setTimeout(function(){alert("abc");}, 100)，
此時FF跑卻又OK，
所以在猜想是不是fadein()的setTimeout參數表示式不對。

煩各位先進幫忙!
發表人:  kourge [ 2008-10-03, 07:54 ]
文章主題 : 
改成 setTimeout(arguments.callee, 100); 看看。
（如果真的要做一堆特效，jQuery 就堪用。）
發表人:  kaneintku [ 2008-10-03, 14:29 ]
文章主題 : 
kourge 寫:
改成 setTimeout(arguments.callee, 100); 看看。
（如果真的要做一堆特效，jQuery 就堪用。）


還是不行耶~
一樣function fadeout的特效有出來，
但function fadein卻沒有...
發表人:  shyangs [ 2008-10-03, 18:13 ]
文章主題 : 
你在 function fadein(){}，加入 alert(img.style.opacity); 觀察看看。img.style.opacity這個值一直沒有增加，總是滿足你設定的 if 條件，會無窮地一直跑初始值= =a

事實上，我遞迴觀念很弱，幫回覆一下，看能不能吸引高手來討論。

以下是我的修改

代碼:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-tw">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Big5">
<title>淡入及淡出</title>
<style type="text/css">
#fade{
   opacity:1;
   filter: alpha(opacity=100);
}
</style>
<script type="text/javascript">
addLoadListener(init);


function addLoadListener(fn)
{
    window.onload = fn;
}

function init()
{
   img = document.getElementById("fade");
   
   if(typeof img.style.opacity != "undefined")
   {
      browser = "firefox";
      img.style.opacity = 1;
   }
   else if(typeof img.filters.alpha.opacity == "number")
   {
      browser = "ie";
   }

   fadeout();
}

function fadeout()
{
   if(img.style.opacity > 0)
   {
      img.style.opacity -= 0.1;
      setTimeout(fadeout, 100);
   }
   else if(img.style.opacity == 0)
   {
      op=parseFloat(img.style.opacity);
      fadein();
   }
}

function fadein()
{
   if(op > 1)
   {
   return;
   }
   op += 0.1;
   img.style.opacity = op;
   //alert(img.style.opacity);
   setTimeout("fadein()", 100);//setTimeout(fadein, 100);
}
</script>
</head>
<body>
<img src="img10.bmp" id="fade">
<div id="output"></div>
</body>
</html>


setTimeout("fadein()", 100);若寫成setTimeout(fadein, 100);會有不同的效果，不知道為什麼(倒)
發表人:  yuoo2k [ 2008-10-03, 23:56 ]
文章主題 : 
把 init() 改成下面這樣, 會發現很有趣的現象...
代碼:
function init(){
   img = document.getElementById("fade");
   img.style.opacity = 0.5;

   var x = img.style.opacity;
   alert("x=" + x + ", typeof(x)=" + typeof(x));

   var a = img.style.opacity - 0.1;
   alert("a=" + a);

   var b = img.style.opacity + 0.1;
   alert("b=" + b);
}

IE的輸出結果:
代碼:
x=0.5, typeof(x)=number

a=0.4

b=0.6

Firefox的輸出結果:
代碼:
x=0.5, typeof(x)=string

a=0.4

b=0.50.1

怎麼會這樣??

開 Tools -> Error Console 出來執行看看下列算式:
代碼:
"0.5"-0.1 答案是 0.4
"0.5"+0.1 答案是 "0.50.1"

所以問題是... 為何 Firefox 會把 img.style.opacity 視為 String ??

感覺是個 Bug ...
發表人:  Zorro [ 2008-10-04, 00:27 ]
文章主題 : 
代碼:
   if(img.style.opacity < 1){
      img.style.opacity += 0.1;
      setTimeout('fadein()', 100);
   }


改成

代碼:
   if(img.style.opacity < 1){
      img.style.opacity -= 0 - 0.1;
      setTimeout('fadein()', 100);
   }
發表人:  alex301 [ 2008-10-04, 02:08 ]
文章主題 : 
建議改用非遞迴的寫法...
代碼:
function init(){
   img = document.getElementById("fade");
   if(typeof img.style.opacity != "undefined"){
      browser = "fx";
      img.style.opacity = 1;
   }else if(typeof img.filters.alpha.opacity == "number"){
      browser = "ie";
      img.filters.alpha.opacity = 100;
   }

   setTimeout(fadeout, 0);
   setTimeout(fadein, 1000);
}

function setOpacity(value) {
   if (browser == "fx") img.style.opacity = value/10;
   if (browser == "ie") img.filters.alpha.opacity = value*10;
}

function fadeout(){
   for (var i=0; i<=10; i++)
      setTimeout('setOpacity('+(10-i)+')', 100*i);
}

function fadein(){
   for (var i=0; i<=10; i++)
      setTimeout('setOpacity('+i+')', 100*i);
}
第 1 頁 (共 1 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/