Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it
    Registrato dal
    Oct 2005
    Messaggi
    272

    [OOP] Valore di this quando si usa setInterval

    Salve,
    sto tentando di creare un oggetto personalizzato in JavaScript, mi trovo di fronte ad un problema. Scritto questo codice:

    codice:
    function Anim(id,property,startValue,endValue,speed)  {
    	this.el = document.getElementById(id);
    	this.property = property;
    	this.endValue = endValue;
    	this.speed = speed || 10;
    	this.direction = (startValue > endValue)?-1 :1;
    	this.changeValue = changeValue;
    
    	if(property == 'alpha')  this.setOpacity(startValue);
    	else  this.el.style[property] = startValue + 'px';
    
    	this.tm = setInterval("this.changeValue()",speed);	
    }
    
    function changeValue()  {
    	document.getElementById('output').innerHTML = this;
    }
    il metodo changeValue perde il riferimento all'oggetto di cui fa parte (nel div output viene stampato [Object Window]). Suppongo dipenda dall'uso di setInterval. Qualcuno saprebbe dirmi come ovviare al problema? Come fare in modo che anche changeValue riconosca this come riferimento ad Anim? Grazie!

  2. #2
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    codice:
    ...
       var _self = this;
    
       this.tm = setInterval(function() {
          _self.changeValue();
       },speed);
    
    }
    ...

    oppure

    codice:
    ...
       this.tm = (function(_self) {
           return setInterval(function() {
             _self.changeValue();
          },speed);
       })(this);
    ...
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  3. #3
    Utente di HTML.it
    Registrato dal
    Oct 2005
    Messaggi
    272
    Intanto grazie mille: funziona a meraviglia!
    Potresti anche spiegarmi il perché di questa sintassi che annida changeValue in una funzione anonima e fa uso della variabile _self? Perché setInterval fa perdere il riferimento?
    Grazie ancora

  4. #4
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    i timer funzionano molto più velocemente se passi loro una funzione piuttosto che una stringa (altrimenti javascript deve fare un eval implicito)

    ed è praticamente necessaria qualora volessi passare dei parametri in modo agevole a quel metodo

    ovviamente all'interno di una funzione anonima (o di uno scope annidato creato implicitamente) perdi il riferimento a this per cui devi passarlo dichiarando una variabile con la keyword 'var' nello scope immediatamente esterno (esempio 1) oppure passare il riferimento a this in una funzione (esempio 2)

    L'esempio 2 ad esempio è concettualmente presente in diverse applicazioni che usano jQuery per evitare conflitti con la funzione $: si esegue una funzione anonima che wrappa l'oggetto 'jquery' così

    codice:
    (function($) {
      /* qui si può usare l'oggetto '$' senza rischiare interferenze con altre librerie.
    })(jQuery);
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  5. #5
    Utente di HTML.it
    Registrato dal
    Oct 2005
    Messaggi
    272
    Ok grazie

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.