setInterval global

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • setInterval global

    Halli Hallo ich hab ein Problem mit meinen Intervallen.
    Und zwar code ich ein Auto mit javascript und hab bisher für jede fahrtrichtung einen eigenen Intervall das soll sich ändern sodass ich nur noch einen interval haben der das ganze steuert. die jeweiligen funktionen die in den setInterval angegeben werden steuern die jeweilige richtung.

    Code:
    var x = 50;    //variable für die x-achse
    var y = 50;    //variable für die y-achse
    var t = 8;    //variable für die Zeit 
    var b = "url(images/rechts.png)"; //variable für den Background des Bereichs
    
    function go(anweisung) 
    {
                if(anweisung == "rechts")
                {
                     move = setInterval("rechts()",40);
                 } 
                if(anweisung == "links")
                {
                     move = window.setInterval("links()", 40);
                 } 
                if(anweisung == "runter") 
                {
                    move =  window.setInterval("runter()", 40);
                } 
                if(anweisung == "rauf") 
                {
                     move =  window.setInterval("rauf()", 40);
                } 
                if(anweisung =="right")
                {
                    move = window.setInterval("right()", 40);
                }
                if(anweisung=="turbo")
                {
                    t = t + 10;
                }
                if(anweisung == "slow")
                {
                    t =  t - 5;
                }
                else if(anweisung == "stop")
                { window.clearInterval (move);}
    }

  • #2
    Und was genau ist jetzt dein Problem? Und wehe du sagst "Funktioniert nicht"...
    This is what happens when an unstoppable force meets an immovable object.

    Kommentar


    • #3
      es funktioniert ja soweit wie ichs geschrieben hab das ist ja nicht das problem ^^ sondern das problem ist das jedes mal ein neuer interval gestartet wird, und ich einen einzigen interval haben möchte für alle richtungen.
      zumindest laut meinem lieben arbeit geber.
      Ich clear ja den interval jedes mal bevor ich die richtung änder .. aber ich will halt nur EINEN interval für ALLE richtungen haben und nicht für jede richtung einen interval

      werd einfach mal den restlichen code dazu posten. vllt versteht mans dann besser.

      Code:
      function rauf(){
              if (y > 50)
              {
                y = y -  t;
                b = "url(images/rauf.png)";
                document.getElementById("auto").style.top  = (y  + "px");
                document.getElementById("auto").style.backgroundImage= b;
                }     }
      function runter(){
          if (y < 450 )
                  {
                    y = y +  t;
                    b = "url(images/runter.png)";
                    document.getElementById("auto").style.top  = (y  + "px");
                    document.getElementById("auto").style.backgroundImage= b;    
                   }}
      function links(){    
          if (x > 20)
                  {
                      x = x -  t;
                      b = "url(images/links.png)";
                      document.getElementById("auto").style.left  = (x  + "px");
                      document.getElementById("auto").style.backgroundImage = b;
                  }}
      function rechts(){
                  if (x < 1400)
                  {
                        x = x +  t;
                        b = "url(images/vor.png)";    // setzt den hintergrund des bereichs für das auto fest
                        document.getElementById("auto").style.left  = (x  +   "px");
                        document.getElementById("auto").style.backgroundImage = b;
                  }}
      function right(){
                        x = x +  t;
                        b = "url(images/rechts.png)";
                        document.getElementById("auto").style.left  = (x  +   "px");
                        document.getElementById("auto").style.backgroundImage = b;
                  }
                  
      function buttonrechts() // die funktion fragt ab wie das auto gerade steht und je nachdem wie es steht wird die richtung verändert beim drücken des buttons
      {
          if(b=='url(images/rechts.png)'){go('rechts');}
          if(b=='url(images/vor.png)'){window.clearInterval(move); go('runter');}
          if(b=='url(images/runter.png)'){window.clearInterval(move);go('links');}
          if(b=='url(images/links.png)'){window.clearInterval(move);go('rauf');}
          if(b=='url(images/rauf.png)'){window.clearInterval(move);go('rechts');}
      }            
      function buttonlinks()
      {
          if(b=='url(images/vor.png)'){window.clearInterval(move);go('links');}
          if(b=='url(images/links.png)'){window.clearInterval(move);go('runter');}
          if(b=='url(images/runter.png)'){window.clearInterval(move);go('right');}
          if(b=='url(images/rechts.png)'){window.clearInterval(move);go('rauf');} 
          if(b=='url(images/rauf.png)'){window.clearInterval(move);go('links');} 
      }
      Zuletzt geändert von Parayia; 31.08.2011, 09:30.

      Kommentar


      • #4
        Dann übergib doch in deinem Intervall der auf zu rufenden Funktion einen parameter in welche Richtung es gehen soll und in der Funktion machst du dann ne Fallunterscheidung.

        also sowas wie:
        Code:
        go(anweisung)  {
        if(anweisung == "rechts" || 
        anweisung == "links" || anweisung == "runter" || anweisung == "rauf" || anweisung == "right")
        {
         move = window.setInterval("moveto('"+anweisung+")", 40);            
        }             
        }
        
        moveto(richtung)
        {
        switch(richtung)
        {
        case "links":
        if (x > 20)             
        {                 
        x = x -  t;                 
        b = "url(images/links.png)";                 
        document.getElementById("auto").style.left  = (x  + "px");                 
        document.getElementById("auto").style.backgroundImage = b;             
        }
        break;
        case "rechts":
        if (x < 1400)            
        {                   
        x = x +  t;                   
        b = "url(images/vor.png)";    // setzt den hintergrund des bereichs für das auto fest                   
        document.getElementById("auto").style.left  = (x  +   "px");                   
        document.getElementById("auto").style.backgroundImage = b;             
        }
        break;
        case "rauf":
        if (y > 50)         
        {           
        y = y -  t;          
        b = "url(images/rauf.png)";           
        document.getElementById("auto").style.top  = (y  + "px");           
        document.getElementById("auto").style.backgroundImage= b;           
        }     
        break;
        case "runter":
        if (y < 450 )             
        {               
        y = y +  t;               
        b = "url(images/runter.png)";               
        document.getElementById("auto").style.top  = (y  + "px");               
        document.getElementById("auto").style.backgroundImage= b;                  
        }
        break;
        case "right":
        x = x +  t;                   
        b = "url(images/rechts.png)";                   
        document.getElementById("auto").style.left  = (x  +   "px");                   
        document.getElementById("auto").style.backgroundImage = b;
        break;
         
        
        }
        }

        Kommentar


        • #5
          hab das ganze jetzt mal eingebaut ... aber immer wenn ich jetzt bei onclick = go('rechts') mache ... gibt er mir 50000000000000000000 jahre lang den fehler aus das rechts not defined ist

          soweit der code des JS
          Code:
          var x = 50;    //variable für die x-achse
          var y = 50;    //variable für die y-achse
          var t = 8;    //variable für die Zeit 
          var b = "url(images/rechts.png)"; //variable für den Background des Bereichs
          function go(anweisung)  {
          if(anweisung == "rechts" || 
          anweisung == "links" || 
          anweisung == "runter" ||
          anweisung == "rauf" ||
          anweisung == "right"){
          
           move = window.setInterval("moveto("+anweisung+")", 40);            
          }       }
                
          function moveto(richtung)
          {
          switch(richtung)
          {
          case "links":
          if (x > 20)             {  
               x = x -  t;
               b = "url(images/links.png)"; 
               document.getElementById("auto").style.left  = (x  + "px"); 
               document.getElementById("auto").style.backgroundImage = b;           
                }
          break;
          case "rechts":
          if (x < 1400) 
          {                   
          x = x +  t; 
          b = "url(images/vor.png)"; 
          document.getElementById("auto").style.left  = (x  +   "px"); 
          document.getElementById("auto").style.backgroundImage = b;             }
          break;
          case "rauf":
          if (y > 50)         {
               y = y -  t;
               b = "url(images/rauf.png)";
               document.getElementById("auto").style.top  = (y  + "px");
               document.getElementById("auto").style.backgroundImage= b;           }     
          break;
          case "runter":
          if (y < 450 )             {
              y = y +  t; 
              b = "url(images/runter.png)";
              document.getElementById("auto").style.top  = (y  + "px");
              document.getElementById("auto").style.backgroundImage= b;                  }
          break;
          
          }
          }
          function buttonrechts() // die funktion fragt ab wie das auto gerade steht und je nachdem wie es steht wird die richtung verändert beim drücken des buttons
          {
              if(b=='url(images/rechts.png)'){go('rechts');}
              if(b=='url(images/vor.png)'){go('runter');}
              if(b=='url(images/runter.png)'){go('links');}
              if(b=='url(images/links.png)'){go('rauf');}
              if(b=='url(images/rauf.png)'){go('rechts');}
          }            
          function buttonlinks()
          {
              if(b=='url(images/vor.png)'){go('links');}
              if(b=='url(images/links.png)'){go('runter');}
              if(b=='url(images/runter.png)'){go('right');}
              if(b=='url(images/rechts.png)'){go('rauf');} 
              if(b=='url(images/rauf.png)'){go('links');} 
          }


          Dazu dann passend der code des HTML docs

          Code:
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
          <html>
          <head>
          <title>Ferngesteuertes Auto</title>
          <script src="starts.js" type="text/javascript"></script>
          <link rel="stylesheet" href="cardesign.css" type="text/css" >
          <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
          </head>
          <body>
          <div id="steuer">
          <input type="button" name="Right" value="Right"     onclick=    "buttonrechts()"> <!--bei click auf den Button rechts wird die funktion buttonrechts() ausgeführt.das auto fährt nach rechts-->
          <input type="button" name="Left"  value="Left"      onclick=    "go('links')" > <!--bei click auf den Button links wird die funktion buttonlinks() ausgeführt. das auto fährt nach links-->
          <input type="button" name="Stop"  value="Stop"         onclick=    "go('stop')"> <!--bei click auf den Button Stop wird die funktion Stop() ausgeführt die alle intervalle stopt-->
          <input type="button" name="Down"  value="Down"         onclick=    "go('runter')"> 
          <input type="button" name="Up"      value="Up"           onclick=    "go('rauf')">
          <input type="button" name="Turbo" value="Turbo"     onclick=    "go('turbo')"> <!--bei click auf den Button Turbo wird die funktion turbo() ausgeführt und das auto fährt schneller--> 
          <input type="button" name="Slow"  value="Slow"         onclick=    "go('slow')"> <!-- bei click auf den button slow wird die funktion slow() ausgeführt und das auto fährt langsamer-->
          </div>
          <div id="fahren"><!-- Bereich in dem das Auto sich bewegt-->
          </div>
          <div id="auto"><!--Bereich des Autos-->
          </div>
          </body>
          </html>

          Kommentar


          • #6
            Wird dir auch ne Zeile angegeben wo der Fehler auftritt?
            ach und setzte ggf einfache anführungszeichen im setInterval um "+anweisung+"
            Zuletzt geändert von boeserfrosch; 31.08.2011, 10:25.

            Kommentar


            • #7
              ja wohl hab mal die komplette fehlermeldung genommen ^^

              rechts is not defined
              [IMG]chrome://firebug/content/blank.gif[/IMG] move = window.setInterval("moveto("+anweisung+")", 40); starts.js (Zeile 12)



              Ich seh den fehler nur irgendwie nicht ...

              Kommentar


              • #8
                Hast du das noch mitbekommen?

                Zitat von boeserfrosch Beitrag anzeigen
                ach und setzte ggf einfache anführungszeichen im setInterval um "+anweisung+"

                Kommentar


                • #9
                  ja hab ich gemacht ... hab das ganze auch komplett umgedreht also bei "+anweisung+" und sonst einfache ... wenn ich das mache kommt zwar der Fehler nicht mehr ... aber es bewegt sich auch nix ^^


                  die if abfrage die ich ganz unten stelle ... bleibt doch die gleiche ... und es is doch nach wie vor go('rechts') / go('links') usw. oder seh ich das falsch?
                  Zuletzt geändert von Parayia; 31.08.2011, 10:33.

                  Kommentar


                  • #10
                    gib mir mal bitte deine css-datei dann kann ich mir das mal genauer anschauen

                    Kommentar


                    • #11
                      Ich poste meine Kompletten Dateien in ner zip datei wenn das okay ist :P

                      Kommentar


                      • #12
                        Ich denke das sollte kein Problem sein

                        Kommentar


                        • #13
                          File-Upload.net - auto.zip


                          wollts hier hochladen ^^ is nur 100kb zu groß :P
                          unten rechts der kleine download button und danke für deine bemühungen :>

                          BTW. die dateien movement.js und start.js ignorieren :P waren nur zum ausprobieren ^^ die datei mit deiner möglichkeit ist startS.JS
                          css datei erkennt man ja .. genau wie die html datei :>
                          Zuletzt geändert von Parayia; 31.08.2011, 10:56.

                          Kommentar


                          • #14
                            So funktioniert es jetzt bei mir:
                            HTML-Code:
                            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
                            <html>
                            <head>
                            <title>Ferngesteuertes Auto</title>
                            <script    type="text/javascript">
                            var x = 50;    //variable für die x-achse
                            var y = 50;    //variable für die y-achse
                            var t = 8;    //variable für die Zeit 
                            var b = "url(images/rechts.png)"; //variable für den Background des Bereichs
                            var move = null;
                            function go(anweisung)  {
                            if(anweisung == "rechts" || 
                            anweisung == "links" || 
                            anweisung == "runter" ||
                            anweisung == "rauf" ||
                            anweisung == "right"){
                            
                                if(move != null)
                                {
                                    clear(move);
                                }
                                move = window.setInterval("moveto('"+anweisung+"')", 40);            
                                
                            }       
                            if(anweisung=="turbo")
                                        {
                                            t = t + 10;
                                        }
                            if(anweisung == "slow")
                                        {
                                            t =  t - 5;
                                        }
                            else if(anweisung == "stop")
                                        { window.clearInterval (move);}
                            
                            
                                    }
                            
                            
                            function clear(interval)
                            {
                                window.clearInterval (interval);
                            }
                            
                                  
                            function moveto(richtung)
                            {
                            switch(richtung)
                            {
                            case "links":
                            if (x > 20)             {  
                                 x = x -  t;
                                 b = "url(images/links.png)"; 
                                 document.getElementById("auto").style.left  = (x  + "px"); 
                                 document.getElementById("auto").style.backgroundImage = b;        
                                   
                                  }
                            break;
                            case "rechts":
                            
                            if (x < 1400) 
                            {             
                                
                            x = x +  t; 
                            b = "url(images/vor.png)"; 
                            document.getElementById("auto").style.left  = (x  +   "px"); 
                            document.getElementById("auto").style.backgroundImage = b;             }
                            break;
                            case "rauf":
                            if (y > 50)         {
                                 y = y -  t;
                                 b = "url(images/rauf.png)";
                                 document.getElementById("auto").style.top  = (y  + "px");
                                 document.getElementById("auto").style.backgroundImage= b;           }     
                            break;
                            case "runter":
                            if (y < 450 )             {
                                y = y +  t; 
                                b = "url(images/runter.png)";
                                document.getElementById("auto").style.top  = (y  + "px");
                                document.getElementById("auto").style.backgroundImage= b;                  }
                            break;
                            
                            }
                            }
                            function buttonrechts()
                            {
                                
                                if(b=='url(images/rechts.png)'){go('rechts');}
                                if(b=='url(images/vor.png)'){go('runter');}
                                if(b=='url(images/runter.png)'){go('links');}
                                if(b=='url(images/links.png)'){go('rauf');}
                                if(b=='url(images/rauf.png)'){go('rechts');}
                            }            
                            function buttonlinks()
                            {
                                if(b=='url(images/vor.png)'){go('links');}
                                if(b=='url(images/links.png)'){go('runter');}
                                if(b=='url(images/runter.png)'){go('right');}
                                if(b=='url(images/rechts.png)'){go('rauf');} 
                                if(b=='url(images/rauf.png)'){go('links');} 
                            }
                            
                            
                            
                            </script>
                            <style type="text/css">
                            body
                            {
                            width:700px;height:700px;
                            background-image:url(images/camouflage.png);
                            }
                            #auto 
                            {
                            top: 50px;
                            left: 20px;
                            position: absolute;
                            background-image:url('images/rechts.png');
                            width:200px;
                            height:200px;
                            background-repeat:no-repeat;
                            }
                            #steuer 
                            {
                            margin-left:500px;
                            padding-left:50px;
                            padding-top:3px;
                            padding-right:50px;
                            background:white;
                            height:30px;
                            width:570px;
                            border:5px ridge green;
                            opacity:0.6;
                            filter:alpha(opacity=60);
                            }
                            #fahren
                            {
                            height:600px;
                            width:1600px;
                            border:5px ridge green;
                            opacity:0.2;
                            filter:alpha(opacity=60);
                            background:white;
                            }
                            
                            
                            </style>
                            <link rel="stylesheet" href="cardesign.css" type="text/css" >
                            <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
                            </head>
                            <body>
                            <div id="steuer">
                            <input type="button" name="Right" value="Right"     onclick=    "buttonrechts()"> 
                            <input type="button" name="Left"  value="Left"      onclick=    "go('links')" > 
                            <input type="button" name="Stop"  value="Stop"         onclick=    "go('stop')"> 
                            <input type="button" name="Down"  value="Down"         onclick=    "go('runter')"> 
                            <input type="button" name="Up"      value="Up"           onclick=    "go('rauf')">
                            <input type="button" name="Turbo" value="Turbo"     onclick=    "go('turbo')"> 
                            <input type="button" name="Slow"  value="Slow"         onclick=    "go('slow')"> 
                            </div>
                            <div id="fahren"><!-- Bereich in dem das Auto sich bewegt-->
                            </div>
                            <div id="auto"><!--Bereich des Autos-->
                            </div>
                            
                            </body>
                            </html>

                            Kommentar


                            • #15
                              ausprobiert klappt
                              hoffe du bist noch was da ^^ für den fall eines falles das ich noch iwas an fragen hab

                              aber ansonsten super :>

                              Kommentar

                              Lädt...
                              X