[js] method aanroepen door setInterval met object-context

[Verwijderd]

Ik wil een generieke progress-bar maken in javascript. Dus ik maak een mooi object met methods, zoiets als:

JavaScript:

Ding.prototype.start=Ding_start;
Ding.prototype.stop=Ding_stop;
Ding.prototype.doeHet=Ding_doeHet;
function Ding(chProgress)
{
  this.interval=100;
  this.ch=chProgress||'.';
}
function Ding_start()
{
  this.intervalID=window.setInterval( this.doeHet, this.interval );
}
function Ding_stop()
{
  window.clearInterval(this.intervalID);
}
function Ding_doeHet()
{
  //dit werkt niet, omdat het niet draait in de object-context van het object Ding...
  window.status+=this.ch;
}

var x=new Ding('.');
x.start();

Bovenstaande gaat niet werken, omdat window.setInterval de functie Ding_doeHet wel aanroept, maar niet in de object-context van x.

Nu lijkt het me niet echt mogelijk om dat wel te doen, maar hoe kan ik toch een generiek javascript object maken, waarbij dat wel mogelijk is. Het beste wat ik kan bedenken is:

code:

function Ding(chProgress,varName)
{
  this.varName=varName;
}
...
function Ding_start()
{
  this.intervalID=window.setInterval( this.varName+'.doeHet()', this.interval );
}

maar echt bevredigend vind ik het niet: niet echt netjes

Weet iemand een betere oplossing?

[Verwijderd]

He, dat is een goede uitleg waarom het niet werkt. Ik geloof dat ik het eindelijk een beetje begin te begrijpen.
Ik had geloof ik ook eens een soortgelijk probleem met bewegende plaatjes, ik kreeg toen ook oplossingen in jouw trend. Je kon de objecten ook automatisch in een array laten stoppen en dan van daaruit de setinterval laten lopen of zoiets.

Bij webfx hebben ze een animator toolkit en volgens mij lossen ze dat probleem op een soortgelijke manier op.

Ik denk dus (maar wat weet ik er nou van) dat er geen betere oplossing van

[Bosmonster]

Klassiek JS probleem, veroorzaakt door 'slechte' setInterval en setTimeout functies, die simpelweg een eval() doen, welke globaal uitgevoerd wordt en niet lokaal.

wat makkelijker is is om je objecten aan een globale array toe te voegen, en dit eigenlijk voor alle objecten die je in de toekomst maakt vol te houden

PHP:

document.Dingen = new Array();

function Ding(chProgress)
{
  this.interval=100;
  this.ch=chProgress||'.';

  this.index = document.Dingen.length;
  document.Dingen[this.index] = this;
}

function Ding_start()
{
  this.intervalID=window.setInterval( 'document.Dingen['+this.index+'].doeHet()', this.interval );
}

[drm]

offtopic:

JavaScript:

this.ch=chProgress||'.';

[Clay]

dat is een super korte "if".

var variabele = a || (b, bij gebrek aan a)

[drm]

Hm, ik zou zeggen dat variabele dan altijd "true" is*. Ok, aparte JS constructie dus

*lees: het resultaat van een logische or

[oh,when?]

tis misschien ook interesant om naar het volgende topic te kijken: Functies via een timeout in het hetzelfde object aanroepen

[Verwijderd]

Clay schreef op 09 oktober 2002 @ 11:27:
dat is een super korte "if".

var variabele = a || (b, bij gebrek aan a)

Deze constructie gebruik ik veel bij default-waarden. Ik heb dat afgekeken van de Netscape javascript guide, en het riekt idd sterk naar Perl.

Je moet overigens wel oppassen, want als je een lege string neemt (resulteert in false) krijg je toch de punt. En met booleans is dit onbruikbaar.

Bosmonster schreef op 09 oktober 2002 @ 10:00:
wat makkelijker is is om je objecten aan een globale array toe te voegen, en dit eigenlijk voor alle objecten die je in de toekomst maakt vol te houden

Tof, dat lijkt me 'n mooie oplossing. Bedankt.

[Verwijderd]

http://www.insidedhtml.com/tips/functions/ts18/page4.asp
Ik heb eens wat gezocht, en heb dit gevonden. Hier staat iets in over dat je in Netscape (lees:Mozilla) objecten kunt doorsturen en in IE niet. Daar hebben ze dan een soort fix voor gemaakt in de volgende pagina's van het artikel.
Ik weet er te weinig van om zeker te zijn dat het relevant is, maar mijn gevoel zegt me dat het wel zo is.

[Verwijderd]

Dat stukje op insidedhtml.com doet in feite wat Bosmonster zegt, alleen doen ze er een mooi wrappertje omheen (window.setInterval wordt vervangen). Ik heb het niet echt doorgelezen, maar als ik de code zie, zou het ook gewoon in IE moeten werken...

Maarja, een library voor dit probleem vindt ik een beetje overdreven.

[Clay]

met een kleine uitbreiding kan je elk custom object een eigen interval (en timeout) geven, iets ala

JavaScript:

tObjs = [];
Object.prototype.setInterval = function(func, time) {
    if(!this.tIndex) {
        this.tIndex = tObjs.length;
        tObjs[this.tIndex] = this;
    }

    return setInterval('tObjs['+this.tIndex+'].'+func, time);
}

// fiets object
function Fiets() {
    this.n = 0;
    this.setInterval('trap()', 100);
}

Fiets.prototype.trap = function() {
    window.status = this.n ++;
}

new Fiets();

[[eNeRGy]]

als je:

code:

setInterval( function() {
  //doe hier je code, inclusief alle variabellen en objecten die er aanwezig zijn
}, 100);

doet ben je er toch ?