2013-08-15 6 views
5

Hier ist ein fiddle.Aufruf Javascript Objekt Methode mit SetInterval()

Ich versuche, ein Countdown-Objekt zu erstellen, die moment.js verwendet (ein Plugin, das ich es vorziehen, über Datum mit())

var Countdown = function(endDate) { 
    this.endMoment = moment(endDate); 

    this.updateCountdown = function() { 
     var currentMoment, thisDiff; 

     currentMoment = moment(); 
     thisDiff = (this.endMoment).diff(currentMoment, "seconds"); 

     if (thisDiff > 0) 
      console.log(thisDiff); 
     else { 
      clearInterval(this.interval); 
      console.log("over"); 
     } 
    } 

    this.interval = setInterval(this.updateCountdown(), 1000); 
} 

ich dann eine Instanz des Countdowns erstellen wie folgt:

var countdown = new Countdown("January 1, 2014 00:00:00"); 

Allerdings scheint die Funktion nur einmal ausgeführt zu werden. Irgendwelche Ideen? Soll ich stattdessen setTimeout() verwenden?

+1

versuchen Sie 'this.updateCountdown' in Ihrem Aufruf von' setInte rval'. – fbynite

+0

das scheint nicht auf das Objekt verweisen (löst einen Fehler 'Kann Methode' diff 'undefined nicht aufrufen): http://jsfiddle.net/zCFr5/2/ – dougmacklin

+0

Sie müssen etwas wie diese http: // jsfiddle tun .net/zCFr5/3/ – fbynite

Antwort

3

können Sie entweder speichern Sie Ihre this Kontext als lokale Variable wie folgt aus:

var Countdown = function(endDate) { 
    var self = this; 
    this.endMoment = moment(endDate); 

    this.updateCountdown = function() { 
     var currentMoment, thisDiff; 

     currentMoment = moment(); 
     thisDiff = (self.endMoment).diff(currentMoment, "seconds"); 

     if (thisDiff > 0) 
      console.log(thisDiff); 
     else { 
      clearInterval(self.interval); 
      console.log("over"); 
     } 
    } 

    this.interval = setInterval(this.updateCountdown, 1000); 
} 

Oder Sie können einfach Ihre Variablen direkt verwenden wie:

var Countdown = function(endDate) { 
    var endMoment = moment(endDate); 

    this.updateCountdown = function() { 
     var currentMoment, thisDiff; 

     currentMoment = moment(); 
     thisDiff = (endMoment).diff(currentMoment, "seconds"); 

     if (thisDiff > 0) 
      console.log(thisDiff); 
     else { 
      clearInterval(interval); 
      console.log("over"); 
     } 
    } 

    var interval = setInterval(this.updateCountdown, 1000); 
} 

ich das vorziehen zweiter Ansatz - fiddle

9

Sie sollten eine Referenz zu funktionieren, nicht das Ergebnis seiner Ausführung übergeben. Außerdem benötigen Sie einige zusätzliche "Magie", um eine Methode auf diese Weise aufzurufen.

var me = this; 
this.interval = setInterval(function() { 
    me.updateCountdown(); 
}, 1000); 
+0

Anstatt einen Verweis auf 'this' zu speichern, können Sie' Function.bind' verwenden. http://StackOverflow.com/a/6065221/139010 –

+0

Ja, aber es funktioniert nicht in älteren Browsern. Und dafür kein Rahmen. – kirilloid

+0

Scheint nicht zu funktionieren, hier ist die aktualisierte Geige: http://jsfiddle.net/zCFr5/1/ – dougmacklin