Shyne: setTimeout Schleife beenden + Funktion bei Fensteraufruf starten

Halli Hallo,

dank eurer Hilfe bin nun etwas weiter bei meinem Problem. Nun habe ich ziemlich konkrete Fragen. Ich fange mal mit dem "wichtigsten" an:

  1. Es ist ein Bild zu Anfang zu sehen und wird "ausgefadet". Dann komme ich in eine Schleife. Leider begreife ich noch nicht alles, bin nämlich blutiger Anfänger. clearTimeout() - damit war ich auch überfordert ... :(
    Weiss Jemand, welchen Wert ich wie ändern muss damits nach dem 1. Faden aufhört?

  2. Das Ganze soll nicht etwa bei einem Klick aufgerufen werden, sondern wenn man auf die Seite kommt sofort. Da habe ich auch nicht gefunden, wie ich das umsetze.

 <script type="text/javascript">  
        function fade(step) {  
            var imgs = document.getElementById("faderimg");  
  
            step = step || 100;  
  
            imgs.style.opacity = step/100;  
            imgs.style.filter = "alpha(opacity=" + step + ")"; // IE  
  
            step = step - 2;  
  
            if ( 100) {  
                window.setTimeout(function () { fade(step); }, 2);  
            }  
  
        }  
</script>

Ich hatte mich hierdran orientiert: SelfHTML Fader

Vielen Dank schonmal :)

  1. if ( 100) {
                    window.setTimeout(function () { fade(step); }, 2);
                }

    Hier könnte man ja abprüfen, ob noch gefadet werden muss.

    1. if ( 100) {
                      window.setTimeout(function () { fade(step); }, 2);
                  }

      Hier könnte man ja abprüfen, ob noch gefadet werden muss.

        
      { fade(step); },
      ~~~ --> Ich das rausnehme, passiert nichts mehr. Oder was meinst du?
      
      1. Hi,

        if ( 100) {
                        window.setTimeout(function () { fade(step); }, 2);
                    }

        Hier könnte man ja abprüfen, ob noch gefadet werden muss.

        { fade(step); },

          
        Das sollte wohl logisch sein - wenn du sagst, dass in X Millisekunden „nichts” passieren soll, dann passiert wohl nicht viel.  
          
        
        > Oder was meinst du?  
          
        Dass du prüfen sollst, ob du überhaupt noch mal setTimeout aufrufen willst.  
          
        MfG ChrisB  
          
        
        -- 
        “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
        
        1. Dass du prüfen sollst, ob du überhaupt noch mal setTimeout aufrufen willst.

          MfG ChrisB

          Hi,

          wie gesagt, bin blutiger Anfänger, was du sagtest, macht natürlich Sinn bezüglich des Weglassens des....

          Das was du jetzt schreibst, interpretiere ich so, dass ich
                      if ( 100) {
                          window.setTimeout(function () { fade(step); }, 2);
                      }
          weglassen könnte, aber dann passiert ja auch nichts außerdem ist doch setTimeout dazu da um anzuweisen, wie lange das Ding gefadet werden soll...

          Hmmm....

          1. if ( 100) {

            heisst immer, weil 100 immer true ist. Du musst also schreiben
            if (faden noch nicht zuende)
            Ob dein faden beendet ist, kannst du an step feststellen.

            1. if ( 100) {
              heisst immer, weil 100 immer true ist. Du musst also schreiben
              if (faden noch nicht zuende)
              Ob dein faden beendet ist, kannst du an step feststellen.

              Wie ich bereits schrieb, bin ich blutiger Anfänger. Es ist mein erster modifizierter Code. Wenn dein ehrliches und primäres Ziel es ist mir helfen zu wollen, dann verlier bitte paar _erklärende_ Worte wie ein Lehrer in der Schule oder gib mir ein Link oder einen Fachbegriff nachdem ich das entsprechende Tutorial finde und mich selbst lehren kann.

              Jetzt bin ich soweit, dass ich weiss, bei Step muss irgendwie irgendwo irgendwas geschehen, nicht mehr und nicht weniger. Bei meinem Wissens- und Erfahrungsstand läuft der Nutzen da gegen Null auch wenn ich das nicht mag, bin ich mir bewusst, dass ich mehr Hilfe brauche beim ersten Mal.

              Ein Tipp in der Richtung "lern JS" ist evtl. sogar angebracht aber ich muss erstmal diesen Codeschnipsel zum laufen bringen.

              1. Hi,

                Jetzt bin ich soweit, dass ich weiss, bei Step muss irgendwie irgendwo irgendwas geschehen, nicht mehr und nicht weniger.

                opacity kann Werte zwischen 0 und 1 annehmen, wobei 1 vollkommen undurchsichtig ist und 0 vollkommen durchsichtig.
                In deinem Script wird opacity mit step/100 berechnet, wobei step mit 100 startet und bei jedem Durchlauf um 2 verringert wird.

                Wann also ist das Ausfaden wohl fertig, bei welchem Wert von step?

                Diese Frage beantwortest du jetzt - und dann machst du den erneuten zeitverzögerten Aufruf der Funktion davon abhängig, ob step bereits diesen Wert erreicht hat oder nicht.

                Ein Tipp in der Richtung "lern JS" ist evtl. sogar angebracht aber ich muss erstmal diesen Codeschnipsel zum laufen bringen.

                Woher kommen eigentlich bei Anfängern immer diese Zwänge, die sie vom vernünftigen Lernen abhalten?

                MfG ChrisB

                --
                “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
                1. Wann also ist das Ausfaden wohl fertig, bei welchem Wert von step?

                  Vielen Dank, das mit opacity wusste ich, sogar das mit step/100 hatte ich geschnallt bzw stand im Tut... Bei 0 wäre Ende.

                  Diese Frage beantwortest du jetzt - und dann machst du den erneuten zeitverzögerten Aufruf der Funktion davon abhängig, ob step bereits diesen Wert erreicht hat oder nicht.

                  "den erneuten zeitverzögerten Aufruf" - das wäre dieser Teil, denke ich:
                  (Diesen Abschnitt verstehe ich nur bedingt.)

                              if ( 100) {  
                                  window.setTimeout(function () { fade(step); }, 50);  
                              }
                  

                  Im Original sahs so aus:

                              if (step <= 100) {  
                                  window.setTimeout(function () { fade(step); }, 1);  
                              }  
                  
                  

                  Ich könnte nun interpretieren das "100" muss ich durch "0" ersetzen, aber das haut nicht hin.

                  In Worten ausgedrückt, möchte ja sagen: wenn Opacity auf 100 ist bzw auf 1, dann soll das ganze 50 Zeiteinheiten lang faden bis es bei 0 stehen bleibt und dann ist Ende!

                  Mein Fehler ist unter anderem, dass ich nicht klar zu verstehen gebe, wo meine Probleme liegen:

                  step = step || 100; --> verstehe ich auch nicht z.B.

                  Ich habe unter anderem das versucht:

                            if ( 100) {  
                                 aktiv = window.setTimeout(function () { fade(step); }, 1);  
                              }  
                    
                              aktiv = window.setTimeout(function () { fade(step); }, 1);  
                    
                          }
                  

                  Das bringt den ganzen Browser zum Absturz und treibt die CPU Last hoch ^^ Keine Ahnung, was ich da angestellt habe...

                  Woher kommen eigentlich bei Anfängern immer diese Zwänge, die sie vom vernünftigen Lernen abhalten?

                  Naja, in diesem Fall, "muss" ich diese Sache erstmal fertig machen (= Druck) und wenn ich von Anfang an beginne, glaube ich, hätte ich nicht genug Zeit dafür. Das kommt aber noch. Bei CSS/HTML hats auch hingehauen (war auch aus "freien Stücken" und hat viel Spaß gemacht = Kein Druck - beste Voraussetzung).

                  Nochmal großen Dank!

                  1. Hi,

                    "den erneuten zeitverzögerten Aufruf" - das wäre dieser Teil, denke ich:
                    (Diesen Abschnitt verstehe ich nur bedingt.)

                    if ( 100) {

                    window.setTimeout(function () { fade(step); }, 50);
                                }

                      
                    Was verstehst du daran nur bedingt?  
                      
                    (Dass die Abfrage if(100) immer wahr ergibt, wurde ja bereits gesagt.)  
                      
                    
                    > Ich könnte nun interpretieren das "100" muss ich durch "0" ersetzen, aber das haut nicht hin.  
                      
                    „Haut nicht hin” [haut als Problembeschreibung nicht hin](/hilfe/charta.htm#tipps-fuer-fragende).  
                      
                    Bevor du irgendwas in Code umsetzt, überlege dir erst mal verbal, was du an der Stelle abfragen willst.  
                      
                    
                    > In Worten ausgedrückt, möchte ja sagen: wenn Opacity auf 100 ist bzw auf 1, dann soll das ganze 50 Zeiteinheiten lang faden bis es bei 0 stehen bleibt und dann ist Ende!  
                      
                    Und bei Null kommt es wann an?  
                      
                    
                    > step = step || 100; --> verstehe ich auch nicht z.B.  
                      
                    Im Artikel, wo du das her hast, wird auch diese Zeile explizit erklärt.  
                      
                    MfG ChrisB  
                      
                    
                    -- 
                    “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
                    
                    1. Ich könnte nun interpretieren das "100" muss ich durch "0" ersetzen, aber das haut nicht hin.

                      „Haut nicht hin” haut als Problembeschreibung nicht hin.

                      Dann passiert nichts, das Bild bleibt wos ist und das wars.
                      Wäre es also theorethisch richtig?

                      Und bei Null kommt es wann an?

                      Wenn es bei Null ist? Oder wenn es immer weiter absinkt oder unsichtbar ist? Wiess grad nicht, worauf du mich hinweisen möchtest.

                      step = step || 100; --> verstehe ich auch nicht z.B.

                      Im Artikel, wo du das her hast, wird auch diese Zeile explizit erklärt.

                      Sorry, das hatte ich ja selber noch geändert.

                      Wegen verbalisieren, ich versuchs mal komplett und dann sieht man evtl. am besten wo mein Denkfehler ist:

                        
                      <script type="text/javascript">  
                              function fade(step) {  
                                  var imgs = document.getElementById("faderimg"); // Funktion definiert, auf die ID faderimg angewandt  
                        
                                  step = step || 100; // Das Bild hat von Anfang an den Wert 100  
                        
                                  imgs.style.opacity = step/100; // Opacity Werrte für das Element  
                                  imgs.style.filter = "alpha(opacity=" + step + ")"; // IE  
                        
                                  step = step - 2; // Der Wert wird immer um -2 verringert...  
                        
                                  if ( 100) {  
                                      window.setTimeout(function () { fade(step); }, 50); // ...in dieser Zeit, wenn Opacity in dem Fall bei 100 bzw 1 ist (wird Opacity innerhalb von 50 Zeiteinheiten auf 0 runtergerechnet)  
                                  }  
                        
                              }  
                      </script>  
                      
                      

                      Ok, der Tipp war gar nicht mal so schlecht. Wo ist denn da überhaupt eine Schleife und warum entsteht eine? Es wird ja bis auf 0 runtergrechnet und ich bin happy, warum dann immer wieder?

                      Oh man... :(

                      1. Hi,

                        Und bei Null kommt es wann an?
                        Wenn es bei Null ist? Oder wenn es immer weiter absinkt oder unsichtbar ist? Wiess grad nicht, worauf du mich hinweisen möchtest.

                        Darauf, dass der Wert von opacity von step abhängt.
                        Also bietet sich der aktuelle Wert von step an, um die Entscheidung zu treffen, ob ein erneuter zeitverzögerter Aufruf erfolgen soll oder nicht.

                        step = step - 2; // Der Wert wird immer um -2 verringert...

                        if ( 100) {
                                        window.setTimeout(function () { fade(step); }, 50); // ...in dieser Zeit, wenn Opacity in dem Fall bei 100 bzw 1 ist (wird Opacity innerhalb von 50 Zeiteinheiten auf 0 runtergerechnet)

                        Nein, die 50 bedeutet, dass der nächste Aufruf in 50 Millisekunden stattfindet.  
                          
                        
                        > Wo ist denn da überhaupt eine Schleife und warum entsteht eine?  
                          
                        Weil die Funktion sich immer wieder neu selber aufruft.  
                        (Das soll sie ja auch bis zu einem bestimmten Zeitpunkt.)  
                          
                        
                        > Es wird ja bis auf 0 runtergrechnet und ich bin happy, warum dann immer wieder?  
                          
                        Weil deine Funktion nicht aufhört, sich selbst aufzurufen, wenn das Bild komplett durchsichtig ist.  
                        (Und dann fängt sie wieder von vorne an, weil sie den Wert von step dann ja selber wieder auf 100 setzt.)  
                          
                        MfG ChrisB  
                          
                        
                        -- 
                        “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
                        
                        1. Also bietet sich der aktuelle Wert von step an, um die Entscheidung zu treffen, ob ein erneuter zeitverzögerter Aufruf erfolgen soll oder nicht.

                          [code lang=javascript]             step = step - 2; // Der Wert wird immer um -2 verringert...

                          Warte, muss ich hier sagen, verringere um 2 BIS du bei 0 bist? Wie drückt man das aus?

                          Danke nochmal. vllt wird das ja doch was heute :D

                          1. Hi,

                            step = step - 2; // Der Wert wird immer um -2 verringert...

                            Warte, muss ich hier sagen, verringere um 2 BIS du bei 0 bist?

                            Nein.

                            An der Stelle, wo der erneute zeitverzögerte Aufruf der Funktion stattfindet, sagst du, „rufe die Funktion erneut zeitverzögert auf, wenn ...”

                            MfG ChrisB

                            --
                            “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
                            1. An der Stelle, wo der erneute zeitverzögerte Aufruf der Funktion stattfindet, sagst du, „rufe die Funktion erneut zeitverzögert auf, wenn ...”

                              ~~~javascript      if ( 100) {
                                              window.setTimeout(function () { fade(step); }, 50);
                                          }

                                
                              Wenn es bei 100 bzw. 1 ist (also sichtbar), BIS es unsichtbar wird. Nur wie kriegt man das BIS es 0 ist hin?  
                              Ansonsten ist doch die WENN / IF Funktion richtig. Soll ja anfangen, wenn das Bild voll sichtbar ist.
                              
                              1. Hi,

                                Wenn es bei 100 bzw. 1 ist (also sichtbar), BIS es unsichtbar wird. Nur wie kriegt man das BIS es 0 ist hin?
                                Ansonsten ist doch die WENN / IF Funktion richtig. Soll ja anfangen, wenn das Bild voll sichtbar ist.

                                Du willst nicht „anfangen, wenn …”, sondern „aufhören, wenn …”
                                D.h. anders formuliert, „weitermachen, wenn nicht …”

                                MfG ChrisB

                                --
                                “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
                                1. Du willst nicht „anfangen, wenn …”, sondern „aufhören, wenn …”
                                  D.h. anders formuliert, „weitermachen, wenn nicht …”

                                  continue? Hmmm? Müde... :(

                                  1. Hi,

                                    Du willst nicht „anfangen, wenn …”, sondern „aufhören, wenn …”
                                    D.h. anders formuliert, „weitermachen, wenn nicht …”

                                    continue? Hmmm? Müde... :(

                                    if(...) {  
                                      // Weitermachen: Funktion erneut zeitverzögert aufrufen lassen  
                                    }
                                    

                                    MfG ChrisB

                                    --
                                    “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
                                    1. if(...) {

                                      // Weitermachen: Funktion erneut zeitverzögert aufrufen lassen
                                      }

                                      
                                      >   
                                        
                                      Weist du mich hierhin: http://de.selfhtml.org/javascript/sprache/bedingt.htm?  
                                        
                                      Wenn ich an der Funktion drehe, dann läuft alles schief ansonsten. Also wenn ich was in den Klammern änder.
                                      
                                      1. Hi,

                                        if(...) {

                                        // Weitermachen: Funktion erneut zeitverzögert aufrufen lassen
                                        }

                                        
                                        > >   
                                        >   
                                        > Weist du mich hierhin: http://de.selfhtml.org/javascript/sprache/bedingt.htm?  
                                          
                                        Wenn dir ernsthaft nicht klar ist, wie man if benutzt - dann verweise ich dich jetzt wirklich darauf, dass du die Grundlagen von JavaScript erlernen solltest.  
                                          
                                        MfG ChrisB  
                                          
                                        
                                        -- 
                                        “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
                                        
                                        1. Wenn dir ernsthaft nicht klar ist, wie man if benutzt - dann verweise ich dich jetzt wirklich darauf, dass du die Grundlagen von JavaScript erlernen solltest.

                                          Nein, aber ich brauche den Code. Kannst du mir nicht verraten, was du meinst?

                                          Ich werde schlecht an einem Tag JS lernen... Und sollte es gehen, würde ich es hassen, das will ich ebenfalls nicht.

                                        2.             if ( Step > 0) {  
                                                          window.setTimeout(function () { fade(step); }, 0);  
                                                      }
                                          
                                          1. Das wars! Vielen Dank :-)!!!!!! HHAHAHA Das Gefühl ist super!

                                            Jetzt müssteste mir nur noch verraten wie ich das mit dem Fenster hinbekomme. Der Script soll direkt bei Seitenaufruf starten xD

                                            1. Das wars! Vielen Dank :-)!!!!!! HHAHAHA Das Gefühl ist super!

                                              Jetzt müssteste mir nur noch verraten wie ich das mit dem Fenster hinbekomme. Der Script soll direkt bei Seitenaufruf starten xD

                                              Nochmal HURRRAAAAAAAAA

                                              <body onload="fade()">

                                              Das ist es! Das waren wohl meine helle 10Min :D

                                              Vielen Dank an alle, besonders Chris!

                                        3. der *alte* Kristallkugelleser überrascht mich
                                          *ChrisB-mal-nen-Geduldsorden-anheft*

                              2. @@Shyne:

                                nuqneH

                                ~~~javascript

                                if ( 100) {

                                window.setTimeout(function () { fade(step); }, 50);
                                            }

                                
                                >   
                                > Wenn es bei 100 bzw. 1 ist  
                                  
                                An welcher Stelle hast du in deiner Bedingung „es“ und „bei … ist“ untergebracht?  
                                  
                                [Computer sind stockdoof.](http://community.de.selfhtml.org/zitatesammlung/zitat817) Sie erkennen nicht, was man von ihnen WILL, sondern tun (bestenfalls) das, was man ihnen SAGT. Es obliegt dem Programmierer, beides in Einklang zu bringen.  
                                  
                                Qapla'
                                
                                -- 
                                Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)