[Erledigt] jQuery: setTimeout innerhalb einer Klasse

Paul.Schramenko · 05.02.2011, 12:35

Hallo ich habe eine kleine Klasse als Plugin für eine Seite geschrieben.
Wobei ich mir nicht sicher bin, ob man so ein Konstrukt überhaupt als Klasse bezeichnet.

Folgender (vereinfachter) Code soll das Problem näher darstellen:

Code:

;(function($){
    $.fn.myClass= function(params){
        function init(params) {
            /*
             * initialize something here
             */
        }

        function doSomething() {
            /*
             * do something here
             */
            setTimeout('doSomething();', 4000);
        }

        /* Here we go */
        init(params);
        doSomething();
    }
})(jQuery);

Wie kann ich innerhalb der "Klasse" mit setTimeout() die Funktion selbst nochmal aufrufen? Wenn ich das einfach als Funktion mache, ist es ja gar kein Problem, aber innerhalb dieses Konstrukt kommt immer folgende Fehlermeldung

Code:

doSomething is not defined

rudygotya · 05.02.2011, 14:13

Hi,

jquery.fn === jquery.prototype, von dem her solltest du sicherstellen, dass du durch alle elemente durchiterierst und wieder zurückgibst.

Ändere dein setTimeout doch mal folgendermaßen:

PHP-Code:

  if (typeof Function.prototype.bind !== 'function') {
    Function.prototype.bind = function (context) {
        var args = Array.prototype.slice.call(arguments, 1),
            f = this;
        return function () {
            args.push.apply(args, arguments);
            return f.apply(context, args);
        };
    };
}
var that = this;
setTimeout(doSomething.bind(that), 4000);

Warnung: hab erst einen Kaffee

Paul.Schramenko · 05.02.2011, 14:44

Super, bist ein Schatz!
Vielen Dank mit .bind(this); funktionierts wunderbar!

[Offtopic]
Wie bezeichnet man eigentlich so einen Konstrukt? Ist das eine JS-Klasse oder hat das einen anderen Namen oder gar keine feste Bezeichnung...
[/Offtopic]

nikosch · 05.02.2011, 15:19

PHP-Code:

          function doSomething() {
            /*
             * do something here
             */
            setTimeout(doSomething , 4000);
        }

rudygotya · 05.02.2011, 15:19

Du erweiterst den javascript prototypen des Objects jQuery (welches der Vereinfachung halber das jquery.fn getauft hat).
Vererbung kommt erst dann hinzu, wenn du z.b. mit jquery sub (V1.5) ableitest.

Was machst du denn da eigentlich bzw. was hast du denn vor? Das sieht auf den ersten Blick nicht so aus als würde das in den fn namespace gehören.

Hier mal ein einfaches Beispiel auf meiner jquery lib- evtl hilft dir das weiter:

PHP-Code:

  $.fn.animIn = function (options) {
        var opts = $.extend({}, $.fn.animIn.defaults, options);
        return this.each(function(options) {
            var $this = $(this),
                o = $.data('options') ? $.extend({}, opts, $.data('options')) : opts;
            o.init.call(this);

            if($.browser.msie) {
                $this.fadeIn(o.duration);
            } else {
                $this.animate({
                    height: 'show',
                    opacity: o.opacity
                }, o.duration);
            }
            o.callback.call(this);
        });
    };
    $.fn.animIn.defaults = {
        init : function(){},
        callback : function(){},
        opacity: 100,
        duration: 150
    };

edit: das bind war dafür gedacht, damit er im scope bleibt, evtl ist das auch in dem fall gar nicht wichtig. Mit bind(that) hatte es nicht funktioniert? Werd heute irgendwie nicht wirklich wach, damnit -.-

Paul.Schramenko · 05.02.2011, 16:11

Ich hab auf einer Seite mehrere Boxen, in die aus der DB Bilder geladen werden, und die als default auf display:none; gesetzt sind.
Und ich zeig dann mit dieser Funktion ramdom die Bilder an. Das sieht im Endeffekt so aus, nicht schön, aber es funktioniert...

HTML-Teil

HTML-Code:

<div rel="1" class="ps-slider-box">
    <div style="display: none;" id="image-1-1" class="ps-slider-images">
        <img style="max-width: 200px; border: 0pt none;" src="/public/images/living/4.jpg">
    </div>
    <div style="display: block;" id="image-1-2" class="ps-slider-images">
        <img style="max-width: 200px; border: 0pt none;" src="/public/images/living/5.jpg">
    </div>
</div>
<div rel="2" class="ps-slider-box">
    <div style="display: none;" id="image-2-1" class="ps-slider-images">
        <img style="max-width: 200px; border: 0pt none;" src="/public/images/living/1.jpg">
    </div>
    <div style="display: none;" id="image-2-2" class="ps-slider-images">
        <img style="max-width: 200px; border: 0pt none;" src="/public/images/living/2.jpg">
    </div>
    <div style="display: block;" id="image-2-3" class="ps-slider-images">
        <img style="max-width: 200px; border: 0pt none;" src="/public/images/living/3.jpg">
    </div>
</div>

jQuery-Funktion

Code:

;(function($){
    $.fn.imageChanger = function(className){
        var newId, actId, actualLink, newLink, itemName;
        var imageCount, livingId;

        function initSlider() {
            itemName = className;
            $(itemName).each(function(){
                $(this).children().eq(0).fadeIn('slow', function(){});
            });
        }

        function changeImage() {
            $(itemName).each(function(){
                imageCount = parseInt($(this).children().length);
                livingId = parseInt($(this).attr('rel'));

                $(this).children().each(function(i){
                    if ($(this).is(':visible')) {
                        actId = parseInt(i)+1;

                        if (actId == imageCount) {
                            newId = 1;
                        } else {
                            newId = actId + 1;
                        }
                        actualLink = '#image-' + livingId + '-' + actId;
                        newLink = '#image-' + livingId + '-' + newId;
                    }
                });
                $(actualLink).fadeOut(0, function(){});
                $(newLink).fadeIn('slow', function(){});
            });
            
            if (typeof Function.prototype.bind !== 'function') {
                Function.prototype.bind = function (context) {
                    var args = Array.prototype.slice.call(arguments, 1),
                        f = this;
                    return function () {
                        args.push.apply(args, arguments);
                        return f.apply(context, args);
                    };
                };
            }
            setTimeout(changeImage.bind(this), 7000);
        }

        /* Here we go */
        initSlider(className);
        changeImage();
    }
})(jQuery);

Aufruf:

Code:

$(document).ready(function(){
    $.fn.imageChanger('.ps-slider-box');
});

Wenn du verbesserungsvorschläge hast nur her damit.

Noch eine Frage am Rande, wie mach ich Rückgabe eines Objekts, mit dem ich weiter arbeiten kann. Sowas in der Art meine ich.

Code:

;(function($){
    $.fn.myFunct = function(){
        function doSomething() {
            alert('called->doSomething()');
        }        
        
        function test() {
            alert('test');
        }
        
        doSomething();
        
        /* was muss ich hier zurückliefern? this?*/
        return this;
    }
})(jQuery);

$(document).ready(function(){
    var myFunc = $.fn.myFunc();

    $('#clickMe').click(function(){
        myFunc.test();        
    });
});

Paul.Schramenko · 05.02.2011, 16:15

Zitat:

Zitat von nikosch

PHP-Code:

          function doSomething() {
            /*
             * do something here
             */
            setTimeout(doSomething , 4000);
        }

Das war ja das Problem, dass genau das nicht funktioniert hat...

nikosch · 05.02.2011, 16:19

Ja, ist mir schon klar geworden. Du könntest aber den Selektor als Closure mitspeichern. Dann sollte es gehen.

PHP-Code:

      $.fn.myClass= function(params){

        var that = this;

        function init(params) {
            /*
             * initialize something here
             */
        }

        function doSomething() {
            /*
             * do something here
             */
            setTimeout(function () { that.doSomething (); } , 4000);
        }

Paul.Schramenko · 05.02.2011, 16:22

Zitat:

Zitat von nikosch

Ja, ist mir schon klar geworden. Du könntest aber den Selektor als Closure mitspeichern. Dann sollte es gehen.

Das könnte auch eine Möglichkeit sein... Probiers gleich mal aus... Danke

rudygotya · 05.02.2011, 18:04

Function bind hat noch den vorteil, dass du gleich noch paar Argumente mitgeben kannst, ansonsten ist es genau das, was nikosch in #8 macht. Bind kann praktisch sein, braucht man aber nicht unbedingt.

Paar Anregungen:

- gleich mit jqueryui widget umsetzen, dann musst du dich nicht (mehr groß) ums aufräumen kümmern
- dein Plugin gibt nicht das ursprüngliche Objekt zurück, sprich du kannst nicht chainen.
- der fadein sollte in den fadeout callback, in deinem code kannste auch gleich hide() verwenden.
- $(this) solltest du unbedingt cachen
- parseInt nen 2. parameter mitgeben > parseInt(foo, 10)
- einen leeren callback brauchst du nicht anzugeben

grüße

Basti

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
Seite nur im Script aufrufbar	BlackScorp	PHP Tipps 2010	4	03.11.2010 15:57
[Erledigt] jQuery setTimeout und "this"...	halskrause	JavaScript, Ajax und mehr	5	27.10.2010 19:21
[Erledigt] Klasse aus einer anderen Klasse aufrufen	Tobby	PHP-Fortgeschrittene	7	14.07.2010 20:05
[Erledigt] Nur einer bestimmten Klasse Zugriff andere Klasse erlauben	Turamisi	Software-Design	2	20.02.2010 20:31
Klasse für Objekteigenschaft erzeugen?	Asipak	PHP-Fortgeschrittene	25	30.05.2009 19:45
Methode einer anderen Klasse aufrufen	Luka	PHP-Fortgeschrittene	15	09.11.2008 14:19
funktion innerhalb einer Klasse mit call_user_func aufrufen	phpbeginner	PHP Tipps 2008	8	22.05.2008 16:20
String-Parser Klasse - was muss rein?	Matze	PHP Tipps 2007	2	08.04.2007 22:14
mehr als eine Klasse einbinden	Alpha Centauri	PHP-Fortgeschrittene	4	13.04.2006 20:56
[Erledigt] Zugriff auf eine Klasse innerhalb einer Funktion -&amp;gt; Fehle		PHP-Fortgeschrittene	23	05.02.2006 13:02
Instanz einer Klasse in einer anderen Klasse verwenden	Buhmann	PHP-Fortgeschrittene	7	28.10.2005 23:12
Rückgabewert auf einer Klasse anders als in der Klasse	micbur	PHP Tipps 2005-2	6	10.06.2005 15:06
[Erledigt] Instanz einer Klasse innerhalb einer Funtion verwenden		PHP-Fortgeschrittene	9	14.04.2005 21:51
[Erledigt] Problem mit Übergabe einer Klasse in PHP4		PHP-Fortgeschrittene	10	08.01.2005 21:00
[Erledigt] Instanz bilden innerhalb einer Klasse		PHP Tipps 2004	7	11.12.2004 12:58

05.02.2011, 12:35
Paul.Schramenko Erfahrener Benutzer Registriert seit: 15.04.2010 Beiträge: 813 PHP-Kenntnisse: Fortgeschritten	[Erledigt] jQuery: setTimeout innerhalb einer Klasse Hallo ich habe eine kleine Klasse als Plugin für eine Seite geschrieben. Wobei ich mir nicht sicher bin, ob man so ein Konstrukt überhaupt als Klasse bezeichnet. Folgender (vereinfachter) Code soll das Problem näher darstellen: Code: ;(function($){ $.fn.myClass= function(params){ function init(params) { /* * initialize something here / } function doSomething() { / * do something here / setTimeout('doSomething();', 4000); } / Here we go / init(params); doSomething(); } })(jQuery); Wie kann ich innerhalb der "Klasse" mit setTimeout()* die Funktion selbst nochmal aufrufen? Wenn ich das einfach als Funktion mache, ist es ja gar kein Problem, aber innerhalb dieses Konstrukt kommt immer folgende Fehlermeldung Code: doSomething is not defined __________________ "My software never has bugs, it just develops random features." "Real programmers don't comment. If it was hard to write, it should be hard to understand!" Positive Bewertungen sind nicht unwillkommen...


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

05.02.2011, 14:13
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Hi, jquery.fn === jquery.prototype, von dem her solltest du sicherstellen, dass du durch alle elemente durchiterierst und wieder zurückgibst. Ändere dein setTimeout doch mal folgendermaßen: PHP-Code: `if (typeof Function.prototype.bind !== 'function') { Function.prototype.bind = function (context) { var args = Array.prototype.slice.call(arguments, 1), f = this; return function () { args.push.apply(args, arguments); return f.apply(context, args); }; }; } var that = this; setTimeout(doSomething.bind(that), 4000);` Warnung: hab erst einen Kaffee __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

05.02.2011, 14:44
Paul.Schramenko Erfahrener Benutzer Registriert seit: 15.04.2010 Beiträge: 813 PHP-Kenntnisse: Fortgeschritten	Super, bist ein Schatz! Vielen Dank mit .bind(this); funktionierts wunderbar! [Offtopic] Wie bezeichnet man eigentlich so einen Konstrukt? Ist das eine JS-Klasse oder hat das einen anderen Namen oder gar keine feste Bezeichnung... [/Offtopic] __________________ "My software never has bugs, it just develops random features." "Real programmers don't comment. If it was hard to write, it should be hard to understand!" Positive Bewertungen sind nicht unwillkommen...

05.02.2011, 15:19
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	PHP-Code: `function doSomething() { /* * do something here / setTimeout(doSomething , 4000); }` __________________ -- One pixel is still too big. Please make it smaller. ASAP.* Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

05.02.2011, 16:19
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Ja, ist mir schon klar geworden. Du könntest aber den Selektor als Closure mitspeichern. Dann sollte es gehen. PHP-Code: `$.fn.myClass= function(params){ var that = this; function init(params) { /* * initialize something here / } function doSomething() { / * do something here / setTimeout(function () { that.doSomething (); } , 4000); }` __________________ -- One pixel is still too big. Please make it smaller. ASAP.* Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

05.02.2011, 18:04
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Function bind hat noch den vorteil, dass du gleich noch paar Argumente mitgeben kannst, ansonsten ist es genau das, was nikosch in #8 macht. Bind kann praktisch sein, braucht man aber nicht unbedingt. Paar Anregungen: - gleich mit jqueryui widget umsetzen, dann musst du dich nicht (mehr groß) ums aufräumen kümmern - dein Plugin gibt nicht das ursprüngliche Objekt zurück, sprich du kannst nicht chainen. - der fadein sollte in den fadeout callback, in deinem code kannste auch gleich hide() verwenden. - $(this) solltest du unbedingt cachen - parseInt nen 2. parameter mitgeben > parseInt(foo, 10) - einen leeren callback brauchst du nicht anzugeben grüße Basti __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog