Linuchs: Was macht clearInterval() ?

Hallo,

wenn ich ein Interval mit clearInterval() gestoppt habe, kann ich scheinbar die Interval-Variable nicht mehr nutzen.

Habe gesucht, aber keine genaue Erklärung gefunden, was bei clearInterval() mit der Variable passiert.

  
var opacity_timer;  
function einblenden () {  
  opacity = opacity +0.05;  
  document.getElementById( "panorama_akt" ).style.opacity = opacity;  
  if ( opacity == 1.0 ) {  
    window.clearInterval( opacity_timer );  
    opacity = 0.0;  
  }  
}  
function nxtBild () {  
  ...  
  opacity_timer = window.setInterval( "einblenden()", 100 ); // funktioniert nur 1 x  
  ...  
}  

Linuchs

  1. Hallo Linuchs,

    kann es sein, dass du nxtBild aufrufst, bevor das einblenden abgeschlossen ist? Ich würde an den Anfang von nxtBild ein clearInterval setzen.

    document.getElementById( "panorama_akt" ).style.opacity = opacity;

    liegt das Modell oder ist es so breit? :-)

    Gruß, Jürgen

  2. wenn ich ein Interval mit clearInterval() gestoppt habe, kann ich scheinbar die Interval-Variable nicht mehr nutzen.

    Doch, geht. Vermutlich hast Du irgendwo im Gesamtpaket einen logischen Fehler.

    1. Doch, geht. Vermutlich hast Du irgendwo im Gesamtpaket einen logischen Fehler.

      Scheint so, aber ich erkenne ihn nicht. Der alert (opacity); zeigt steigende Werte wie 2.95... 10.95000000000002, 14.300000000000068, ...

      Dabei dürfte der max. 1.05 werden, weil er dann auf 0.0 zurückgesetzt wird. Der entspr. Vergleich wird nicht erkannt.

      var opacity = 0.0;  
      var opacity_timer, nxt_timer;  
      function einblenden () {  
        opacity = opacity +0.05;  
        document.getElementById( "panorama_akt" ).style.opacity = opacity;  
        if ( opacity > 1.0 ) {  
      //  window.clearInterval( opacity_timer );  
          opacity = 0.0;  
        }  
      }  
      function nxtBild () {  
        bildzaehler++;  
        if ( typeof arr_panorama[bildzaehler] == "undefined" || arr_panorama[bildzaehler][1] == "" ) bildzaehler = 0;  
        document.getElementById( "panorama_sic" ).src = document.getElementById( "panorama_akt" ).src; // Bild sichern  
        // neues Bild  
        alert (opacity);  
        document.getElementById( "panorama_akt" ).style.opacity = opacity;  
        document.getElementById( "panorama_akt" ).src = arr_panorama[bildzaehler][1];  
        document.getElementById( "panorama_text" ).innerHTML = arr_panorama[bildzaehler][0];  
      //opacity_timer = window.setInterval( "einblenden()", 100 );  
      }  
      nxt_timer = window.setInterval( "nxtBild ()",  8000 );  
      opacity_timer = window.setInterval( "einblenden()", 100 );  
      
      
      1. Da ist viel kruder Kram dabei, auf den ersten Blick sehe ich den Fehler nicht. Kannst Du mal bitte ein komplettes Beispiel als Fiddle machen? Bitte ohne alert: wenn dann console.log :-)

      2. opacity = opacity +0.05;
          document.getElementById( "panorama_akt" ).style.opacity = opacity;
          if ( opacity > 1.0 ) {
          ....

        Wird das if überhaupt erreicht? Du weist den Wert an das Element zu und erst danach prüfst du ihn. Da hat das Element schon einen ungültigen Wert bekommen, vielleicht fliegt dann schon die ganze Funktion raus und das if wird nicht mehr ausgeführt.

        1. opacity = opacity +0.05;
            document.getElementById( "panorama_akt" ).style.opacity = opacity;
            if ( opacity > 1.0 ) {
          Wird das if überhaupt erreicht? Du weist den Wert an das Element zu und erst danach prüfst du ihn. Da hat das Element schon einen ungültigen Wert bekommen, vielleicht fliegt dann schon die ganze Funktion raus und das if wird nicht mehr ausgeführt.

          Das alleine reicht für einen Laufzeitfehler nicht aus. Ist aber dennoch ne heiße Spur. Falls "document.getElementById" hier ins Leere läuft, wird ein Laufzeitfehler geworfen. Also Standardtipp, hatte ich die Nacht vergessen: was sagt die Fehlerkonsole? Falls sie still bleibt: ein Fiddle bitte.

        2. @@Encoder:

          nuqneH

          Wird das if überhaupt erreicht? Du weist den Wert an das Element zu und erst danach prüfst du ihn. Da hat das Element schon einen ungültigen Wert bekommen, vielleicht fliegt dann schon die ganze Funktion raus und das if wird nicht mehr ausgeführt.

          Es ist kein *JavaScript*-Fehler, einer *CSS*-Eigenschaft einen ungültigen Wert zuzuweisen. Das Script läuft davon unbeeindruckt weiter.

          Es ist ein Fehler[tm], hier überhaupt in einer Schleife einer CSS-Eigenschaft wiederholt einen Wert zuzuweisen. Wie gesagt: das JavaScript restlos entsorgen, Sondermüll.

          BTW, es ist auch unsinnig, in einer Schleife document.getElementById() auszuführen und damit wiederholt im DOM zu suchen, was schon längst gefunden wurde. Der Rückgabewert von document.getElementById() wäre in einer Variablen abzulegen und diese innerhalb der Schleife zu verwenden. Aber wie gesagt: das JavaScript ist hier sowieso restlos entsorgen.

          Qapla'

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  3. @@Linuchs:

    nuqneH

    function einblenden () {
      opacity = opacity +0.05;
      document.getElementById( "panorama_akt" ).style.opacity = opacity;

    Schon wieder ein Kätzchen tot.

    Einblenden geht mit transition – und das einfacher und besser als mit JavaScript-Gefrickel.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. Schon wieder ein Kätzchen tot.
      [...]

      Immer noch nicht pauschal überzeugt davon ich bin...

      Ja, im Falle des Setzens einer/mehrerer CSS-Eigenschaft "in einem Rutsch" ist das togglen einer im CSS definierten Klasse vorzuziehen, meinetwegen mit der Überzeugungshilfe eines ansosnten sterbenden Kätzchens...

      Geht es aber um eine Animation / Transition, ist eine JavaScript-Abstraktion, z.B. via jQuery, vorzuziehen:

      • Browserübergreifend konsitentes Verhalten gegeben, inkl. IE8/9
      • Deutliche elegantere Kaskaden, für gewöhnlich möchte man nach Beendigung einer "Transition" etwas nachfolgendes ausführen: $('#ding').fadeTo(..., folgefunktion)...
      • Spätestens, wenn ich verschiedene Transitions anwenden möchte, aber nur auf eine spezielle einen Callback anwenden möchte, wird es hässlich.

      Soweit eine Bibliothek durch entsprechende Abstraktion intern CSS3 verwendet: super. Wenn nicht, dann nicht.

      1. @@Mitleser:

        nuqneH

        Immer noch nicht pauschal überzeugt davon ich bin...

        Yoda, bist du es?

        Ja, im Falle des Setzens einer/mehrerer CSS-Eigenschaft "in einem Rutsch" ist das togglen einer im CSS definierten Klasse vorzuziehen

        Was nicht auf display: none/block zutrifft; hier wäre es notwendig, assistiven Technologien (Screenreadern) die Änderung per WAI-ARIA mitzuteilen. Oder gleich das hidden-Attribut verwenden.

        Geht es aber um eine Animation / Transition, ist eine JavaScript-Abstraktion, z.B. via jQuery, vorzuziehen:

        Möglich. Aber keine selbstgeschriebene JavaScript-Schleife.

        • Browserübergreifend konsitentes Verhalten gegeben, inkl. IE8/9

        Wen interessiert noch IE8 oder gar IE9? Das Anzeigen des Bildes würde auch in alten Browsern funktionieren, nur halt nicht mit Einblendeffekt. Progressive anhancement.

        • Deutliche elegantere Kaskaden, für gewöhnlich möchte man nach Beendigung einer "Transition" etwas nachfolgendes ausführen: $('#ding').fadeTo(..., folgefunktion)...

        Das Event transitionEnd existiert.

        Soweit eine Bibliothek durch entsprechende Abstraktion intern CSS3 verwendet: super. Wenn nicht, dann nicht.

        Wann man ein Framework einsetzt, das intern CSS-Transitions verwendet (und meinetwegen auch graceful degredation für alte Browser), OK.

        Eine selbstgeschriebene JavaScript-Schleife in allen Browsern zu verwenden, nein.

        CSS-Transitions laufen über GPU, JavaScript-Gefrickel wohl eher nicht.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. Yoda, bist du es?

          Die CSS-Macht stark in Dir ist!

          Das Event transitionEnd existiert.

          Aus dem ich mir bei mehreren Transitions frickelig heraussuchen muss, um welche Transition es sich denn handelte. Schwupps habe ich darstellungsbezogene Daten im JS. Da erscheint mir der Einsatz einer Abstraktion die bessere Wahl.

          CSS-Transitions laufen über GPU, JavaScript-Gefrickel wohl eher nicht.

          ACK, ein großer Vorteil.

  4. Hi,

    wenn ich ein Interval mit clearInterval() gestoppt habe, kann ich scheinbar die Interval-Variable nicht mehr nutzen.

    Du solltest lernen, Probleme vernünftig zu analysieren und sinnvolles Debugging zu betreiben. „Scheinbar“-Aussagen sind dabei fehl am Platze.

    opacity = opacity +0.05;

    if ( opacity == 1.0 ) {

    Vermutlich liegt das Problem schlicht darin, dass du versuchst einen Float-Wert auf exakte Gleichheit zu prüfen. Recherchiere bitte, warum das problematisch ist.

    MfG ChrisB

    --
    Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/
    1. if ( opacity == 1.0 ) {
      Vermutlich liegt das Problem schlicht darin, dass du versuchst einen Float-Wert auf exakte Gleichheit zu prüfen. Recherchiere bitte, warum das problematisch ist.

      War auch mein erster Gedanke, hatte er aber hier augenscheinlich schon geändert...