在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中莫名其妙的数学错误

回答

相关问题