在javascript中莫名其妙的數學錯誤

我有一個函數，用來克隆flash文章滾動條this page。不幸的是我在防火牆後面，所以不能上傳我自己的代碼，但這應該給你一個想法。功能：在javascript中莫名其妙的數學錯誤

function select(id) { 
    alert(active+"\n"+((active+1)%4)); 

    var prev = active; 
    active = (typeof(id) == "undefined" ? (active+1)%4 : id); 

    $("#panel").animate({"top": tops[active]}, 750); 
    $("#main"+prev).fadeOut(750); 
    $("#main"+active).fadeIn(750); 
}

所以，如果選擇（）被調用沒有ID，它只是發展到序列中的下一個項目，否則進入選定的項目。

timer = setInterval("select()", 5000);

當一個對象被mouseovered，此功能運行：它定義定時器運行

$("img.thumb").mouseover(function() { 
    clearInterval(timer); 
    select($(this).attr("id").substr(-1)); 
    timer = setInterval("select()", 5000); 
});

麻煩的是，鼠標懸停後，選擇功能爲一個週期發生故障，與下一個與前一個無關的對象。所選對象是一致的 - 在給定相同初始條件的情況下，每次刷新都保持不變，但它與我可以確定的任何方式無關。

最奇怪的是，我在select（）的開始處運行的alert（應該是一個簡單的數學運算）失敗了，聲稱（對於我測試的序列 - 等待從0 - 1的自動滾動，然後鼠標懸停3）（3 + 1）％4 = 3。

我已經在firefox和chrome中測試過了，所以它似乎是javascript固有的。

我只能假設它以某種方式存儲了兩個不同的活動值，但分裂的本質以及如何解決它，都超出了我的想象。

我附上了下面的整個文件，以防其他情況相關。似乎不大可能，但在這一點上，我不排除任何事情。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
     <meta http-equiv="imagetoolbar" content="no" /> 
     <script type="text/javascript" src="jquery.js"></script> 
     <script type="text/javascript"> 
      //alter these as you please 
      var thumbs = ["images/1t.png", "images/2t.png", 
       "images/3t.png", "images/4t.png"]; 
      var mains  = ["images/1.png", "images/2.png", 
       "images/3.png", "images/4.png"]; 
      var links  = ["http://www.goldcoast.com.au/gold-coast-beaches.html", 
       "http://www.goldcoast.com.au/gold-coast-whale-watching.html", 
       "http://www.goldcoast.com.au/gold-coast-hinterland-rainforest.html", 
       "http://www.goldcoast.com.au/gold-coast-history.html"]; 

      //don't touch these 
      var timer = null; 
      var active = 0; 
      var tops = [0, 77, 155, 234]; 

      function select(id) { 
       alert(active+"\n"+((active+1)%4)); 

       var prev = active; 
       active  = (typeof(id) == "undefined" ? (active+1)%4 : id); 

       $("#panel").animate({"top": tops[active]}, 750); 
       $("#main"+prev).fadeOut(750); 
       $("#main"+active).fadeIn(750); 
      } 

      $(function() { 
       for(var i = 0; i < 4; i++) { 
        $("#thumb"+i).attr("src", thumbs[i]); 
        $("#main"+i).attr("src", mains[i]); 
       } 

       $("#main"+active).show(); 

       $("img.thumb").mouseover(function() { 
        clearInterval(timer); 
        select($(this).attr("id").substr(-1)); 
        timer = setInterval("select()", 5000); 
       }); 

       timer = setInterval("select()", 5000); 
      }); 
     </script> 
     <style type="text/css"> 
      #container {position:relative;} 

      #panel  {position:absolute;left:0px;top:0px;z-index:1;} 

      img.thumb {position:absolute;left:8px;z-index:2;} 
      #thumb0  {top:7px;} 
      #thumb1  {top:84px;} 
      #thumb2  {top:162px;} 
      #thumb3  {top:241px;} 

      img.main  {position:absolute;left:118px;top:2px;display:none;} 
     </style> 
    </head> 
    <body> 
     <div id="container"> 
      <img src="images/panel.png" id="panel" /> 
      <img id="thumb0" class="thumb" /> 
      <img id="thumb1" class="thumb" /> 
      <img id="thumb2" class="thumb" /> 
      <img id="thumb3" class="thumb" /> 
      <img id="main0" class="main" /> 
      <img id="main1" class="main" /> 
      <img id="main2" class="main" /> 
      <img id="main3" class="main" /> 
     </div> 
    </body> 
</html>

來源

2011-05-30 wyatt

老兄，請使用'setTimeout（select，5000）;'而不是''select（）「'。 'eval（）'是邪惡的。 – timdream 2011-05-30 02:45:39

無法理解您的代碼，但我認爲這很可能是類型轉換錯誤。一個'parseInt（id）'某處可能只是解決了這個問題。 – timdream 2011-05-30 02:47:27

@timdream好點，歡呼聲。我之前曾經以一個論據來稱呼它。 – wyatt 2011-05-30 02:47:39

根據建議使用parseInt()。

來源

2011-05-30 02:54:41 timdream

在javascript中莫名其妙的數學錯誤

回答

相關問題