slider javascript problema settimeout

12-04-2013, 18.37.59

Ciao ragazzi,

sto realizzando un semplice slider che cambi le immagini dopo un certo tempo, ma ho un piccolo problema. Ho realizzato un metodo "scorri" che deve cambiare l'immagine, ma quando invoco setTimeout mi da questo errore:

this.scorri is not a function

La cosa che non riesco a capire è che il metodo viene eseguito una volta, nel metodo init, e cambia l'immagine. La sua ultima riga contiene il setTimeout e qui ottengo l'errore, dice che
this.scorri non è una funzione, ma lo ha eseguito. Dove sbaglio? Questo è il codice:

Codice:

function slider(id,indirizziFoto) {
	this.riquadro = null;
	this.immagini = indirizziFoto;
	this.link = null; //array che contiene i link di riferimento per ogni immagine dello slider 
	this.imgAttuale = 0;	//l'indice del riquadro attuale inizializzato a 0, la prima immagine dell'array
	this.timeout = null;	//timeout per il metodo scorri

	this.init = function() {
		this.riquadro = document.getElementById(id);
		this.scorri();
	};

	this.avanti = function(){
		if(this.imgAttuale <this.immagini.length-1) {
			this.imgAttuale += 1;
			this.riquadro.src = indirizziFoto[this.imgAttuale];
		}
	};

	this.indietro = function() {
		if(this.imgAttuale >0) {
			this.imgAttuale -= 1;
			this.riquadro.src = indirizziFoto[this.imgAttuale];
		}
	};

	this.scorri = function() {
		if(this.imgAttuale <this.immagini.length-1) {
			this.imgAttuale ++;
			this.riquadro.src = indirizziFoto[this.imgAttuale];
		}
		else {
			this.imgAttuale = 0;
			this.riquadro.src = indirizziFoto[this.imgAttuale];
		}
		this.timeout = setTimeout("this.scorri();",2000);
	};
}

**karl94** · 12-04-2013, 18.44.51

Togli le virgolette, le parentesi e il punto e virgola, passa solamente un riferimento alla funzione, non una stringa.
Comunque sarebbe meglio definire i metodi nel prototipo dell'oggetto, non come funzioni assegnate alle varie proprietà di ogni singola istanza.

12-04-2013, 19.31.48

Ho modificato il metodo init in questo modo:

Codice:

	this.init = function() {
		this.riquadro = document.getElementById(id);
		this.timeout = setInterval(this.scorri,2000);
	};

Ora la temporizzazione funziona, ho però un altro problema: ad ogni esecuzione del metodo
quindi ogni due secondi, ottengo questo errore:

this.riquadro is undefinited

se non uso la temporizzazione funziona, la variabile viene inizializzata una riga sopra. Il codice html legato alla pagina è questo:

Codice:

<html>
	<head>
		<script type=text/javascript src=slider.js></script>
		<script type=text/javascript>
			immagini = new Array("uno.JPG","due.JPG","tre.JPG");
			slider = new slider("slider",immagini);
			
		</script>
	</head>
	<body  onload=slider.init("slider");>
		<div >
			<img id=slider src="uno.JPG">
		</div>
	</body>
</html>

Sapete dirmi qual'è il problema? Grazie

**karl94** · 12-04-2013, 20.13.57

Questo accade poiché quando la funzione che hai passato a setInterval viene chiamata, l'oggetto this all'interno di questa diventa l'oggetto globale (l'oggetto Window). Devi dunque passare una funzione che agisca in modo indipendente dallo scope (e dunque dall'oggetto this) in cui si trova. Per fare ciò EcmaScript5 ci fornisce pronto il metodo bind, che puoi usare in questo modo:

Codice:

this.timeout = setInterval(this.scorri.bind(this), 2000);

Ma questo è stato introdotto solo di recente, dunque non tutti lo supportano. Il metodo alternativo è costruire una funzione che faccia ciò che bind fa:

Codice:

this.timeout = setInterval((function(t){return function(){t.scorri.call(t)}})(this), 2000);

13-04-2013, 11.27.50

Funziona!!!

Ho usato la seconda soluzione per avere maggiore compatibilità.

Grazie mille

Avrei un'altra domanda: perché sarebbe meglio definire i metodi nel prototipo nell'oggetto?

**karl94** · 13-04-2013, 15.39.05

Probabilmente non accede con i moderni motori Javascript, ma nei più vecchi ogni volta che viene creata un'istanza (mediante l'operatore new) di un oggetto slider, vengono reinterpretate le funzioni che lì dichiari ed ad ognuna di queste viene assegnato l'oggetto scope. Se definisci i metodi nel prototipo invece il tutto viene fatto una volta e basta rsiparmiando memoria e preziosi cicli macchina.
Abbi un po' di riguardo anche per i tuoi visitatori che non posseggono dispositivi dalle prestazioni eccelse (specialmente quelli mobili).

Discussione: slider javascript problema settimeout

LinkBack

Strumenti discussione

Display

[RISOLTO] slider javascript problema settimeout

Regole di scrittura