erreur mathématique inexplicable en javascript

J'ai une fonction, utilisée pour cloner le flash scroller article this page. Malheureusement, je suis derrière un pare-feu, donc je ne peux pas télécharger mon propre code, mais cela devrait vous donner une idée. La fonction:erreur mathématique inexplicable en 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); 
}

Donc, si select() est appelée sans id, il progresse simplement à l'élément suivant dans l'ordre, sinon il va à l'élément sélectionné. Il est exécuté sur une minuterie définie:

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

Lorsqu'un objet est mouseovered, cette fonction est exécutée:

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

Le problème est que, après un survol de la souris, la fonction de sélection échoue pour un cycle, avec l'objet suivant n'ayant aucun rapport avec le précédent. L'objet choisi est cohérent - il reste le même à chaque rafraîchissement avec les mêmes conditions initiales, mais il n'est pas lié de quelque façon que ce soit que je puisse déterminer. Ce qui est plus étrange, c'est que l'alerte que je lance au début de select(), qui devrait être une opération mathématique simple, échoue, affirmant que (pour la séquence test I - attendre un défilement automatique de 0 - 1, puis passez la souris sur 3) (3 + 1)% 4 = 3.

J'ai testé cela dans Firefox et Chrome, donc il semble être inhérent à javascript. Je ne peux que supposer qu'il stocke deux valeurs différentes pour actif en quelque sorte, mais la nature de ce schisme, et comment le résoudre, sont au-delà de moi.

J'ai joint le fichier entier ci-dessous au cas où quelque chose d'autre serait pertinent. Cela semble peu probable, mais à ce stade, je n'exclue rien.

<!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>

Source

2011-05-30 wyatt

'eval()' est le mal. – timdream

J'ai du mal à comprendre votre code, mais je pense qu'il s'agit probablement d'une erreur de type. Un 'parseInt (id)' quelque part pourrait juste résoudre le problème. – timdream

@timdream Bon point, bravo. Je l'appelais précédemment avec un argument. – wyatt

Utilisez parseInt() comme commentaire suggéré. Dude, utilisez `setTimeout (select, 5000);` à la place de `" select() "`

Source

2011-05-30 02:54:41 timdream

erreur mathématique inexplicable en javascript

Répondre

Questions connexes