zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden JavaScript Countdown-Klasse

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 27.02.2007, 18:50
Benutzerbild von Sanchez
/(b{2}|[^b]{2})/
neuer user
Thread-Ersteller
 
Registriert seit: 25.02.2007
Beiträge: 25
Sanchez befindet sich auf einem aufstrebenden Ast
Standard JavaScript Countdown-Klasse

Hallo Leute

Ich habe folgendes Problem:
Ich habe mir eine sehr simple Countdown-Klasse in JavaScript geschrieben. Den Zählmechanismus wollte ich mit einer rekursiven Funktion erledigen. Jedoch funktioniert das nicht wirklich (Die Zeile mit dem Fehler hab ich im Code kommentiert)
Wenn ich jedoch anstatt setTimeout("countdownfunc()", 1000); einfach nur countdownfunc(); funktioniert es... nur eben viel zu schnell
Ich hoffe mal dass ihr mir helfen könnt. Hier nun der Code:

Code:
<html>
<head>
  <title>Countdown</title>
  <script type="text/javascript">
  function Countdown() {
    var number;
      
    this.setTime = function(value) {
      number = value;
    };
      
    this.start = function() {
      countdownfunc();
    };
      
    function countdownfunc() {
      document.getElementById("time").innerHTML = (number--);
      if(number > -1) {
        setTimeout("countdownfunc()", 1000); // Hier gibt mir die FF Fehler Konsole folgenden Fehler: countdownfunc is not defined
      }
    }
  }

  window.onload = function() {
    var test = new Countdown();
    test.setTime(10);
    test.start();
  };
  </script>
</head>
<body>
<div id="time"></div>
</body>
</html>

Geändert von Sanchez (28.02.2007 um 16:57 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.02.2007, 00:08
Benutzer
neuer user
 
Registriert seit: 26.01.2007
Beiträge: 87
trixta befindet sich auf einem aufstrebenden Ast
Standard

1. du solltest das ganze mit setInterval().

2. setTimeout("countdownfunc()", 1000); müsste wohl window.setTimeout("countdownfunc()", 1000); heissen.

ob du damit deinen fehler los wirst?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.02.2007, 11:31
Benutzerbild von Sanchez
/(b{2}|[^b]{2})/
neuer user
Thread-Ersteller
 
Registriert seit: 25.02.2007
Beiträge: 25
Sanchez befindet sich auf einem aufstrebenden Ast
Standard

Also mit setInterval() kommt der gleiche Fehler. (Also: countdownfunc is not defined)

Und mit window funktionierts auch nich (Obwohl das window doch eigentlich egal ist oder etwa nicht?)

Geändert von Sanchez (28.02.2007 um 16:58 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 28.02.2007, 12:32
Benutzer
neuer user
 
Registriert seit: 26.01.2007
Beiträge: 87
trixta befindet sich auf einem aufstrebenden Ast
Standard

wenn du setInterval benutzt musst du das ganze natürlich etwas umschreiben. bei setTmeout kannst du aber davon ausgehen, das der Countdown länger dauert.

wenn du innerhalb der Countdown() die countdownfunc aufrufst ist sie dort bekannt, aber wenn du "von aussen" die countdownfunc aufrufst ist sie unbekannt.

Code:
  function Countdown() {
    var number;
    var codownobj = this;
    this.setTime = function(value) {
      number = value;
    };
      
    this.start = function() {
      codownobj.countdownfunc();
    };
      
    this.countdownfunc = function() {
      document.getElementById("time").innerHTML = (number--);
      if(number > -1) {
        window.setTimeout("codownobj.countdownfunc()", 1000); // Hier gibt mir die FF Fehler Konsole folgenden Fehler: countdownfunc is not defined
      }
    }
  }
Mit Zitat antworten
  #5 (permalink)  
Alt 28.02.2007, 13:10
Benutzerbild von Sanchez
/(b{2}|[^b]{2})/
neuer user
Thread-Ersteller
 
Registriert seit: 25.02.2007
Beiträge: 25
Sanchez befindet sich auf einem aufstrebenden Ast
Standard

Also:

1. Dass man das umschreiben muss is mir natürlich klar. So der N00b bin ich ja nun auch nich (Hoff ich ma...)

2. Wieso sollte das länger dauern? Weil der Code davor erstmal verarbeitet werden muss oder wie?

3. Also bei mir funktioniert das immer noch nich ^^
Bei der Zeile: window.setTimeout("codownobj.countdownfunc()", 1000);
bekomme ich folgenden Fehler: codownobj is not defined

Aber nun ist es doch auch so, dass countdownfunc() eine öffentliche Funktion ist. Das is nun nicht gerade im Sinne des Erfinder (also meinem ) aber ich wär froh wenn es erstmal überhaupt funktionierten würde

P.S.: Nur noch ne Verständnisfrage: Das heißt also, dass setTimtout sozusagen von "außen" auf die Klasse zugreift? Ich dachte, da setTimtout in der Klasse steht, würde sie von "innen" drauf zugreifen?!

Geändert von Sanchez (28.02.2007 um 16:58 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 28.02.2007, 13:42
Benutzer
neuer user
 
Registriert seit: 26.01.2007
Beiträge: 87
trixta befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Sanchez Beitrag anzeigen
2. Wieso sollte das länger dauern? Weil der Code davor erstmal verarbeitet werden muss oder wie?
weil die 1000 ms dann anfangen zu zählen, wenn dein script die zeile ausführt. das sind zwar im prinzip nur 2 zeilen davor, aber darunter ist immerhin ein dom-zugriff.

Zitat:
Zitat von Sanchez Beitrag anzeigen
3. Also bei mir funktioniert das immer noch nich ^^

P.S.: Nur noch ne Verständnisfrage: Das heißt also, dass setTimtout sozusagen von "außen" auf die Klasse zugreift? Ich dachte, da setTimtout in der Klasse steht, würde sie von "innen" drauf zugreifen?!
jetzt müsste es funktionieren: codownobj ist nun noch global. weiss leider sonst nicht, wie du "ganz privat" und ohne globale variable von window auf deine innere funktion zugreifen kannst.

Code:
  function Countdown() {
    var number;
    codownobj = this;
    this.setTime = function(value) {
      number = value;
    };
      
    this.start = function() {
      codownobj.countdownfunc();
    };
      
    this.countdownfunc = function() {
      document.getElementById("time").innerHTML = (number--);
      if(number > -1) {
        window.setTimeout("codownobj.countdownfunc()", 1000); // Hier gibt mir die FF Fehler Konsole folgenden Fehler: countdownfunc is not defined
      }
    }
  }
Mit Zitat antworten
  #7 (permalink)  
Alt 28.02.2007, 13:55
Benutzerbild von Sanchez
/(b{2}|[^b]{2})/
neuer user
Thread-Ersteller
 
Registriert seit: 25.02.2007
Beiträge: 25
Sanchez befindet sich auf einem aufstrebenden Ast
Standard

OK... erstmal vielen dank

Ich glaub bei mir ist einfach dran gescheitert, dass setTimeout von "außen" auf die Klasse zugreift und nicht von "innen" (wie ich dachte). Nun ist es eigentlich einleutend...

Die Krönung wär jetzt noch natürlich, dass countdownfunc() ne private Funktion bleibt... vielleicht weiß ja jemand wie das geht. Ansonsten werd ich mich mit dieser Lösung zufrieden geben

Geändert von Sanchez (28.02.2007 um 16:58 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 28.02.2007, 13:58
Alles- & Nixkönne
XHTMLforum-Mitglied
 
Registriert seit: 05.10.2006
Ort: Hamburg
Beiträge: 156
Ernie wird schon bald berühmt werden
Standard

Hallo erstmal,

Zitat:
Zitat von Sanchez Beitrag anzeigen
P.S.: Nur noch ne Verständnisfrage: Das heißt also, dass setTimtout sozusagen von "außen" auf die Klasse zugreift? Ich dachte, da setTimtout in der Klasse steht, würde sie von "innen" drauf zugreifen?!
Dazu ein Zitat aus:
JavaScript - The Denfifnitive Guide By David Flanagan:

The setTimeout( ) method defers the invocation of a JavaScript function or the evaluation of a string of JavaScript code for delay milliseconds. Note that setTimeout( ) executes code only once. If you want multiple invocations, use setInterval( ) or have the code itself call setTimeout( ) again.

When code is executed, it is executed in the context of the Window object. If code is a function, the Window object is the value of the this keyword. If code is a string, it is evaluated in the global scope with the Window object as the only object on the scope chain. This is true even if the call to setTimeout( ) occurred within a function with a longer scope chain.

Wenn du möchtest das deine countdownfunc privat bleibt kannst Du das auch so machen:
Code:
function Countdown() {
    var number;
	var self=this;
      
    this.setTime = function(value) {
      number = value;
    };
      
    this.start = function() {
      countdownfunc();
    };
      
  function countdownfunc() {
      document.getElementById("time").innerHTML = (number--);
	  //alert(number);
      if(number > -1) {
		setTimeout(function(){self.start()},1000)
	   }
    }
  }

  window.onload = function() {
    var test = new Countdown();
    test.setTime(10);
    test.start();
  };
Mit Zitat antworten
  #9 (permalink)  
Alt 28.02.2007, 14:14
Benutzerbild von Sanchez
/(b{2}|[^b]{2})/
neuer user
Thread-Ersteller
 
Registriert seit: 25.02.2007
Beiträge: 25
Sanchez befindet sich auf einem aufstrebenden Ast
Standard

Da hätt ich ja eigentlich auch selber drauf kommen können
Tja manchmal sieht man Wald vor Bäumen nicht... (Das Sprichwort passt auch immer wieder )

Dann vielen Dank an dich und abschließend den finalen Code noch einmal für alle, die genau so auf dem Schlauch stehen, wie ich

Code:
<html>
<head>
  <title>TEST</title>
  <script type="text/javascript">
  function Countdown() {
    var number;
    self = this;
        
    this.setTime = function(value) {
      number = value;
    };
        
    this.start = function() {
      countdownfunc();
    };
        
    function countdownfunc() {
      if(number > -1) {
        setTimeout("self.start()", 1000);
        document.getElementById("time").innerHTML = (number--);
      }
    }
  }

  window.onload = function() {
    var test = new Countdown();
    test.setTime(10);
    test.start();
  };
  //]]>
  </script>
</head>
<body>
<div id="time"></div>
</body>
</html>
Zitat:
weil die 1000 ms dann anfangen zu zählen, wenn dein script die zeile ausführt. das sind zwar im prinzip nur 2 zeilen davor, aber darunter ist immerhin ein dom-zugriff.
Habs jetzt mal anders hingeschrieben. Ich denke, dass die "Verzögerung" nun weg ist

Geändert von Sanchez (28.02.2007 um 16:58 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
jquery.addClass() & Klasse unter ID Problem solick Javascript & Ajax 2 17.01.2011 21:57
PHP OOP: Datenbankeintrag Klasse - ein paar theoretische Überlegungen braindead Serveradministration und serverseitige Scripte 17 24.07.2009 07:29
php Klassen - Einsatz und Sinn? paracelsus Serveradministration und serverseitige Scripte 306 17.02.2009 20:51
Javascript Countdown über MySQL Datenbank verändern Harry2001 Javascript & Ajax 2 31.10.2008 16:11
css-klassen per javascript verändern lomtas Javascript & Ajax 6 25.08.2006 10:58


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:47 Uhr.