Ankündigung

Einklappen
Keine Ankündigung bisher.

Interval an Objekt hängen (jQuery)

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige Weiter
  • #1

    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);
    }
});
    Stichworte: -
  • #2
    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.
    "[URL="http://www.youtube.com/watch?v=yMAa_t9k2VA&feature=youtu.be&t=25s"]Mein Name ist Lohse, ich kaufe hier ein.[/URL]"

    Kommentar

    • #3
      _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.
      [COLOR="#F5F5FF"]--[/COLOR]
      [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
      „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
      [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
      [COLOR="#F5F5FF"]
      --[/COLOR]

      Kommentar

      • #4
        Zitat von nikosch Beitrag anzeigen
        _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.
        "[URL="http://www.youtube.com/watch?v=yMAa_t9k2VA&feature=youtu.be&t=25s"]Mein Name ist Lohse, ich kaufe hier ein.[/URL]"

        Kommentar

        • #5
          Zuletzt geändert von nikosch; 08.06.2010, 20:21.
          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);
    });
          [COLOR="#F5F5FF"]--[/COLOR]
          [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
          „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
          [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
          [COLOR="#F5F5FF"]
          --[/COLOR]

          Kommentar

          • #6
            Zuletzt geändert von Chriz; 08.06.2010, 21:07.
            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.
            "[URL="http://www.youtube.com/watch?v=yMAa_t9k2VA&feature=youtu.be&t=25s"]Mein Name ist Lohse, ich kaufe hier ein.[/URL]"

            Kommentar

            • #7
              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.

              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.
              [COLOR="#F5F5FF"]--[/COLOR]
              [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
              „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
              [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
              [COLOR="#F5F5FF"]
              --[/COLOR]

              Kommentar

              • #8
                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 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
                I like cooking my family and my pets.
                Use commas. Don't be a psycho.
                [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

                Kommentar

                • #9
                  this in stopInterval()-Kontext ist das window-Objekt.
                  Achso, alles klar Danke für die vielen Beispiele.

                  Kommentar

                  Vorherige Weiter
                  Lädt...
                  X