Javascript: Object wordt window object bij setTimeout()v

[Verwijderd]

Oké, ik heb een soort divSlider met ease gemaakt. Als ik maar 1 div wil open en toe klappen mbv deze klasse, geen probleem, dan maakte ik een globale variabele aan die het "object" bevat, maar als ik nou 4 objecten heb kan ik geen gebruik meer maken van m'n globale variabele anders kunnen ze niet allemaal tegelijk open/toeschuiven...

Code:

JavaScript:

var globalSlider = "";
var globalSliderBusy = false;

function DivSlider(div, toHeight){
   this.div = document.getElementById(div);
   this.state = true;
   this.active = false;
   this.toHeight = toHeight;
   this.ch = toHeight;
}

DivSlider.prototype.doSlide = function(){
   if (!this.active){
      if (this.state){
//         window.alert(this);
         this.doSlideIn();
      }else{
//         window.alert(this);
         this.doSlideOut();
      }
   }
}

DivSlider.prototype.doSlideOut = function(){
   var obj = this;
   window.alert(obj);
   if ((obj.toHeight - obj.ch) > 1){
      obj.ch += Math.ceil(parseInt(obj.toHeight - obj.ch) / 8);
      obj.div.style.height = obj.ch + "px";
      window.setTimeout(obj.doSlideOut, 15);
   }else{
      obj.div.style.height = obj.toHeight + "px";
      obj.ch = obj.toHeight;
      obj.active = false;
      obj.state = true;
      obj = "";
      objBusy = false;
   }
}

DivSlider.prototype.doSlideIn = function(){
   var obj = this;
   window.alert(obj);
   if (obj.ch > 1){
      obj.ch -= Math.ceil(parseInt(obj.ch) / 8);
      obj.div.style.height = obj.ch + "px";
      window.setTimeout(obj.doSlideIn, 15);
   }else{
      obj.div.style.height = 0 + "px";
      obj.ch = 0;
      obj.active = false;
      obj.state = false;
      obj = "";
      objBusy = false;      
   }
}

'k heb me al suf gegoogled en gedaan, maar ik geraak d'r echt niet uit

Tevens heb ik het object al meegegeven als parameter maar dan kregek opnieuw een warrige error dat er een ] ontbrak na m'n object, terwijl ik helemaal geen vierkante haakjes gebruikt heb/had

Een werkend voorbeeld ervan kan je hier bekijken:
http://joggink.be/messagepad (hier is d'r maar 1 divSlider object, en dat is de div met het fomulier), deze werkt zonder problemen maar daar gebruik ik m'n globale variabele...

[crisp]

Je geeft nu enkel een reference naar een functie, en die wordt logischerwijs in de global scope uitgevoerd. Dit is het beste op te lossen met een closure:

JavaScript:

window.setTimeout(function() { obj.doSlideIn(); }, 15);

[Verwijderd]

crisp, you're my hero (op Scott Schiller na dan)

[Clay]

Dit probleem kom je ook vaak tegen bij event handlers. Ipv elke keer de scope via een closure doorgeven kan je ook een helper functie aan Function prototypen die dat voor je doet:

JavaScript:

Function.prototype.delegate = function(scope) {
   var reference = this;
   return function() {
      reference.apply(scope, arguments);
   }
} 

En dan in het geval van de timeout:

JavaScript:

this.setTimeout(this.doSlide.delegate(this), 15);

dan heb je die var obj = this; ook niet meer nodig. Mocht je het ranzig vinden dingen aan Function te prototypen kan je de delegate natuurlijk ook als functie van je custom object schrijven. 't lijkt misschien overhead, maar in de praktijk is dit echt een razend handige functie

Overigens houd ik er zelf van bij dit soort objecten niet een id, maar gewoon een verwijzing naar een htmlElement mee te geven aan nieuwe object instanties. Dan heb je in je source ook niet de restrictie om voor alles wat animeren moet id's op te gaan geven. Het hoeft ook niet alleen op div's te slaan natuurlijk

[crisp]

Clay: dat is ongeveer wat prototype's bind() ook doet.
Verder eens met het bijhouden van een reference naar je HTMLElement in een property van je object-instance:

JavaScript:

function MyThingy()
{
    this.x = 0;
    this.el = document.createElement('div');
    this.el.className = 'foo';
    document.body.appendChild(this.el);
}
MyThingy.prototype =
{
    slide: function()
    {
        this.x += 5;
        if (this.x < 400)
        {
            this.el.style.left = this.x + 'px';
            setTimeout(bind(this, this.slide), 20);
        }
    }
}

function bind(el, func)
{
    return function() { func.call(el); }
}

var thing = new MyThingy();
thing.slide();