Interval an Objekt hängen (jQuery)

hoctar · 08.06.2010, 11:15

Hallo

ich versuche ein Interval an ein Objekt anzuhängen, leider wird er beim aufruf von "stopInterval" nicht erkannt.

Code:

$.fn.extend({
    setInterval: function() {
        this._interval = setInterval(function() {
            alert('test');
        });
    },
    stopInterval: function() {
        clearInterval(this._interval);
    }
});

Chriz · 08.06.2010, 19:58

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $.fn.extend({
                    _interval: null,
                    
                    setInterval: function() {
                        console.log("ping init");
                        this._interval = setInterval(function() {
                            console.log("ping");
                        }, 500);
                    },
                    
                    stopInterval: function() {
                        console.log("no ping anymore");
                        // console.log(this)
                        clearInterval($.fn._interval);
                    }
                });
                
                $.fn.setInterval();
                
                setTimeout($.fn.stopInterval, 5000);
            });
        </script>
    </head>
    <body>
        
    </body>
</html>

(benötigt geöffnete Firebug-Konsole)

this in stopInterval()-Kontext ist das window-Objekt.

nikosch · 08.06.2010, 20:15

_interval in $.fn. abzulegen, kommt mir irgendwie falsch vor. Ich würde das abändern (ungetestet):

Code:

    jQuery.intervals = {
        handler : null
    };

    jQuery.fn.extend({
        
        setInterval: function() {
            console.log("ping init");
            jQuery.intervals.handler = window.setInterval(function() {
                console.log("ping");
            }, 500);
        },
        
        stopInterval: function() {
            console.log("no ping anymore");
            // console.log(this)
            window.clearInterval(jQuery.intervals.handler);
        }
    });


    $(document).ready(function() {
        
        $.fn.setInterval();
        
        setTimeout($.fn.stopInterval, 5000);
    });

Ich habe auch window. ergänzt, IMHO ist die Namensgleichheit von setInterval etwas unglücklich.

Chriz · 08.06.2010, 20:43

Zitat:

Zitat von nikosch

_interval in $.fn. abzulegen, kommt mir irgendwie falsch vor

Sinnvoller wäre für mich sowieso $.fn.interval.start() und $.fn.interval.stop()
Dann hättest du einen Scope in den du auch die Hilfsvariable mitspeichern kannst.

nikosch · 08.06.2010, 21:07

Zitat:

Sinnvoller wäre für mich sowieso $.fn.interval.start() und $.fn.interval.stop()

Ich glaube, das geht nicht, Habe ich kürzlich in einem anderen Zusammenhang probiert und nicht hinbekommen. Der Witz ist ja, dass $.fn das jQuery-Objekt erweitert, so dass Du $(selektor).myFunction(); nutzen kannst. Mit obiger Idee müsstest Du das jQuery-Objekt irgendwie durch interval durchreichen, was aber vermutlich*) nicht geht, weil es eben keine Funktion ist.

*) Wie gesagt vermutlich, bin kein Geek, bei JS ist ja fast alles möglich.

[edit]

Jetzt wo ich

$.fn.setInterval();

sehe, fällt mir auf, im Prinzip wird hier ja gar nicht vernünftig erweitert. Eigentlich sollte jede fn.extend-Erweiterung auch das jQuery-Objekt durchreichen.

[edit2] Ergo:

Code:

    jQuery.intervals = {

        handler : null  ,

        start: function() {
            console.log("ping init");
            jQuery.intervals.handler = window.setInterval(function() {
                console.log("ping");
            }, 500);
        },
        
        stop: function() {
            console.log("no ping anymore");
            // console.log(this)
            window.clearInterval(jQuery.intervals.handler);
        }
    };

    $(document).ready(function() {
        
        $.intervals.start();
        
        setTimeout($.intervals.stop, 5000);
    });

Chriz · 08.06.2010, 22:00

Ich glaube es gibt zwei Methoden, entweder du übergibst das Objekt an extend(), dass du erweitern möchtest oder du erweiterst es eben explizit, so wie du. Erstere Methode ist vermutlich langsamer, da alle Objekteigenschaften durchlaufen und gemerged werden müssen. Ob zweitere üblich ist, weiß ich allerdings nicht.

Edit: Ich muss zugeben ich kapiere eigentlich nicht, warum in der stop()-Funktion this.handler nicht funktioniert. Klar weil this = window ist, aber warum eigentlich? Wird das von jQuery so gesetzt? Der Kontext ist ja eindeutig in der "Methode", entsprechend ist der Kontext doch eigentlich jQuery.intervals?! Vor allem weil in start() der this-Kontext ja wirklich das Objekt ist.

nikosch · 08.06.2010, 23:22

Zitat:

Ich glaube es gibt zwei Methoden, entweder du übergibst das Objekt an extend(), dass du erweitern möchtest oder du erweiterst es eben explizit, so wie du.

Ich meinte etwas anderes:

Es gibt $.fn.extend() bzw. $.fn.myProperty = {} und $.extend() bzw. $.myProperty = {}

Ersteres wird benutzt, um zusätzliche Methoden auf das $(selector) zu setzen, letzteres um für den jQuery Namensraum Properties zu ergänzen. Letzteres reicht in diesem Fall aus, weil wir nur globale Funktionalitäten haben, jeine auf eine jQuery-Select-Menge bezogene.

Zitat:

Klar weil this = window ist, aber warum eigentlich?

Das habe ich mich vorhin auch gefragt. Vermutlich aber, weil das abhängig vom Aufruf-Kontext ist: setTimeout wird ja vom windows-Objekt angetriggert.

rudygotya · 09.06.2010, 07:39

Ein älteres plugin dev pattern findest du hier.

Eine bestehende Funktionalität nativer jquery Methoden erweitert man idR. z.b. so:

PHP-Code:

   (function($){
 
    // store original reference to the method
    var _old = $.fn.method;
 
    $.fn.method = function(arg1,arg2){
 
        if ( ... condition ... ) {
           return  .... 
        } else {           // do the default
           return _old.apply(this,arguments);
        }
    };
})(jQuery);

Einen ausführlichen Link zum Pattern und Anwendungen findest du hier.

Wie man den namespace einfach erweitert, habe ich hier ([Erledigt] gesucht: Javascript Editor Outline für Closures) gepostet. Ansonsten immer an jQuery data denken und erst nachdenken, bevor man den namespace "zumüllt"

Empfehlen würde ich dir die Entwicklung auf Basis der ui factory. Insbesondere wäre wohl die ui.progressbar für dich interessanter.

ui developer guide
extending ui widgets

richtig gutes Tutorial auf deutsch:
ui factory am Beispiel einer canvas map I
ui factory am Beispiel einer canvas map II

grüße

Basti

hoctar · 09.06.2010, 23:57

Zitat:

this in stopInterval()-Kontext ist das window-Objekt.

Achso, alles klar

Danke für die vielen Beispiele.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Problem beim dynamischen Erweitern von Arrays in Object Porperties	dille001	PHP Tipps 2010	3	24.05.2010 11:52
Ergebnis einer Datenbankabfrage als Objekt	chunky	PHP Tipps 2010	7	27.01.2010 21:38
Objekt per Klassenmethode löschen	Ti-Systems	PHP Tipps 2010	4	20.01.2010 19:28
[Erledigt] Objekt Iteration Löschmethode	stayInside	PHP-Fortgeschrittene	10	29.11.2009 15:07
[Erledigt] Von einem Objekt auf ein anders Objekt zugreifen	Xenon54	PHP Tipps 2009	12	16.10.2009 16:21
Objekt löschen via Methodenübergabe desselben	nikosch	Software-Design	19	01.06.2009 00:38
[Erledigt] Objekt an Konstruktor übergeben	hawkeye78	PHP Tipps 2009	7	28.02.2009 19:01
[Erledigt] Methoden auf Objekt aufrufen (und fangen), die nicht existieren	tsisson	PHP Tipps 2008	2	07.10.2008 18:19
Objekt im GET-Query wird nicht übertragen	Ralpho	PHP-Fortgeschrittene	10	05.05.2008 10:03
Objekt als ComboBox behandeln	Nalincah	PHP Tipps 2008	2	08.11.2007 03:52
Objekt wird auf einem Server akzptiert auf anderem nicht	nieselfriem	PHP Tipps 2006	3	10.07.2006 01:46
[Erledigt] PHP5 OOP Zugriff aus einem Objekt auf ein externes Objekt		PHP Tipps 2006	5	28.01.2006 16:05
Objekt übergeben	Fatal Error	PHP Tipps 2007	5	28.12.2005 14:43
Group auf MySQL DateTime per Interval	RcRaCk2k	Datenbanken	3	22.07.2005 11:14
kann sich ein Objekt selbst serialisieren?	ajo_silent	PHP Tipps 2005-2	24	27.06.2005 09:13

08.06.2010, 11:15
hoctar Erfahrener Benutzer Registriert seit: 29.09.2008 Beiträge: 155	Interval an Objekt hängen (jQuery) Hallo ich versuche ein Interval an ein Objekt anzuhängen, leider wird er beim aufruf von "stopInterval" nicht erkannt. Code: $.fn.extend({ setInterval: function() { this._interval = setInterval(function() { alert('test'); }); }, stopInterval: function() { clearInterval(this._interval); } });


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

08.06.2010, 20:15
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 34.048 PHP-Kenntnisse: Fortgeschritten	_interval in $.fn. abzulegen, kommt mir irgendwie falsch vor. Ich würde das abändern (ungetestet): Code: jQuery.intervals = { handler : null }; jQuery.fn.extend({ setInterval: function() { console.log("ping init"); jQuery.intervals.handler = window.setInterval(function() { console.log("ping"); }, 500); }, stopInterval: function() { console.log("no ping anymore"); // console.log(this) window.clearInterval(jQuery.intervals.handler); } }); $(document).ready(function() { $.fn.setInterval(); setTimeout($.fn.stopInterval, 5000); }); Ich habe auch window. ergänzt, IMHO ist die Namensgleichheit von setInterval etwas unglücklich. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

08.06.2010, 22:00
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.065	Ich glaube es gibt zwei Methoden, entweder du übergibst das Objekt an extend(), dass du erweitern möchtest oder du erweiterst es eben explizit, so wie du. Erstere Methode ist vermutlich langsamer, da alle Objekteigenschaften durchlaufen und gemerged werden müssen. Ob zweitere üblich ist, weiß ich allerdings nicht. Edit: Ich muss zugeben ich kapiere eigentlich nicht, warum in der stop()-Funktion this.handler nicht funktioniert. Klar weil this = window ist, aber warum eigentlich? Wird das von jQuery so gesetzt? Der Kontext ist ja eindeutig in der "Methode", entsprechend ist der Kontext doch eigentlich jQuery.intervals?! Vor allem weil in start() der this-Kontext ja wirklich das Objekt ist. __________________ "Nuschel ich?" - "Was?" Geändert von Chriz (08.06.2010 um 22:07 Uhr).

09.06.2010, 07:39
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 1.864 PHP-Kenntnisse: Fortgeschritten	Ein älteres plugin dev pattern findest du hier. Eine bestehende Funktionalität nativer jquery Methoden erweitert man idR. z.b. so: PHP-Code: `(function($){ // store original reference to the method var _old = $.fn.method; $.fn.method = function(arg1,arg2){ if ( ... condition ... ) { return .... } else { // do the default return _old.apply(this,arguments); } }; })(jQuery);` Einen ausführlichen Link zum Pattern und Anwendungen findest du hier. Wie man den namespace einfach erweitert, habe ich hier ([Erledigt] gesucht: Javascript Editor Outline für Closures) gepostet. Ansonsten immer an jQuery data denken und erst nachdenken, bevor man den namespace "zumüllt" Empfehlen würde ich dir die Entwicklung auf Basis der ui factory. Insbesondere wäre wohl die ui.progressbar für dich interessanter. ui developer guide extending ui widgets richtig gutes Tutorial auf deutsch: ui factory am Beispiel einer canvas map I ui factory am Beispiel einer canvas map II grüße Basti __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog