Assistance Javascript

Question

La question que j'ai est lorsque la fonction est appelée plusieurs fois pour des éléments différents. Je crois que je dois localiser toutes les variables telles que cette fonction peut être utilisée contre plusieurs éléments. Dans le cas où il importe que j'appelle également jquery 1.3.

Si je ne convoquent que pageSlide une fois, tout va bien, mais une fois que je l'appelle plusieurs fois cela devient douloureux. Aucune erreur, tout comportement erratique.

Le code a été mis à jour

var slideMenu=function(){
  var speed, startWidth, time, menuId, liID, menuLen, menuWidth, globalWidth, openWidth;
  return{

    speed : 0, startWidth : 0, time  : 0, menuId  : 0, liID : 0, menuLen  : 0,        menuWidth  : 0, globalWidth : 0, openWidth : 0,

    build:function(ulID,passStartWidth,passTime,s,passSlideLen,passHeight){
      speed=s;
      startWidth=passStartWidth;
      time=passTime;
      menuId=document.getElementById(ulID);
      liID=menuId.getElementsByTagName('li');
      menuLen=liID.length;
      menuWidth=menuId.offsetWidth;
      globalWidth=menuWidth/menuLen;
      openWidth=Math.floor((menuWidth-startWidth)/(menuLen-1));
      var i=0;
      for(i;i<menuLen;i++){
        s=liID[i];
        s.style.width=globalWidth+'px';
        this.timer(s)
      }
      if(passSlideLen!=null){
        menuId.timer=setInterval(function(){
          slideMenu.slide(liID[passSlideLen-1])
        },time)
      }
    },
    timer:function(s){
      s.onmouseover=function(){
        clearInterval(menuId.htimer);
        clearInterval(menuId.timer);
        menuId.timer=setInterval(function(){
          slideMenu.slide(s)
        },
        time)
      }
      s.onmouseout=function(){
        clearInterval(menuId.timer);
        clearInterval(menuId.htimer);
        menuId.htimer=setInterval(function(){
          slideMenu.slide(s,true)
        },
        time)
      }
    },
    slide:function(s,passChange){
      var changeWidth=parseInt(s.style.width);
      if((changeWidth<startWidth && !passChange) || (changeWidth>globalWidth && passChange)){
        var overallWidth=0;
        var i=0;
        for(i;i<menuLen;i++){
          if(liID[i]!=s){
            var slideObj,openWidth; var opening=0; slideObj=liID[i]; openWidth=parseInt(slideObj.style.width);
            if(openWidth<globalWidth && passChange){
              opening=Math.floor((globalWidth-openWidth)/speed);
              opening=(opening>0)?opening:1;
              slideObj.style.width=(openWidth+opening)+'px';
            }else if(openWidth>openWidth && !passChange){
              opening=Math.floor((openWidth-openWidth)/speed);
              opening=(opening>0)?opening:1;
              slideObj.style.width=(openWidth-opening)+'px'
            }
            if(passChange){
              overallWidth=overallWidth+(openWidth+opening)}else{overallWidth=overallWidth+(openWidth-opening)
            }
          }
        }
        s.style.width=(menuWidth-overallWidth)+'px';
      }else{
        clearInterval(menuId.timer);
        clearInterval(menuId.htimer)
      }
    }
  };
}();

Le code ci-dessus, mais l'erreur ne parvient pas à travailler. Lorsque j'utilise le ce mot-clé, il ne se fait pas mieux.

Ma question est que les variables doivent être "cela.". J'ai essayé différentes combinaisons que je pensais travailler, mais je manque quelque chose.

Answer 1

Je pense que vous êtes mal compris le concept global du modèle de module, lorsque vous avez besoin d'avoir une variable statique globale partagée entre toutes les instances, vous pouvez déclarer ou initialiser votre variable avec le mot-clé « var » juste avant la déclaration de retour .

On suppose que chaque fois que vous changez ces variables toutes vos instances seront touchés par le changement .

var slideMenu=function(){
    // Declare or initialize your private static variables here    
    var speed, startWidth, time;

    return {
        // Public part of your object
        slide:function(s,passChange){
            //To access your variable        
            speed = 20;
        ...

Par contre, si vous voulez garder en sécurité variable de la portée globale, vous devez mettre votre variable dans l'objet retourné par votre fonction, ceci est un moyen fiable pour fournir unique par propriétés d'instance .

var slideMenu=function(){
    // Declare or initialize your private static variables here    
    var speed, startWidth, time;

    return {
        // Public part of your object
        // Declare internal or public properties here
        menuId  : 0, 
        liID    : 0, 
        menuLen : 0,
        ...
        slide:function(s,passChange){
            //To access your private static variable inside functions        
            speed = 20;
            // To access your public/internal properties
            this.menuId = s; // for example ;) 
        }

Pour conclure

Parfois, pour aider à distinguer entre les propriétés internes / publiques certaines personnes écrit un underscore sur leurs propriétés internes (notez que les propriétés restent encore accessibles depuis l'extérieur).

espère que cela aide, bonne chance!

Answer 2

Vous obtenez ce comportement parce que vous utilisez le modèle de module qui permet de conserver des variables statiques privées dans votre objet. Le problème est que ces variables sont partagées entre toutes les instances.

  var sp=0;
  var st=0;
  var t=0;
  var m='';
  var sa='';
  var l=0;
  var w=0;
  var gw=0;
  var ot=0;

Vous devez déplacer ces variables dans votre instance publique alias dans la partie de retour de votre script ou dans le constructeur (mais dans ce cas, vous devrez fournir un getter pour chaque variable).

return{

   // Place your variables here
   sp : 0,
   st : 0,

   ...

   build:function(sm,sw,mt,s,sl,h){
      // And then use the this keyword to access the variable
      this.sp=s;
      this.st=sw;
      t=mt;
      m=document.getElementById(sm);
      sa=m.getElementsByTagName('li');
      l=sa.length;     
      w=m.offsetWidth;     
      gw=w/l;
      ...