Javascript sleep()

[maxmozz]

Ciao a tutti,

sto cercando una funzione che mi ritardi l'esecuzione di alcune funzioni (sleep, delay o wait che dir si voglia). Ne ho trovate alcune sul web ma mi freezano completamente il browser e dopo che è trascorso il ritardo impostato caricano la pagina.

Una volta ricordo di averne trovata una che funzionava, ma ora non la trovo più.

Qualcuno mi sa dare una mano?

Grazie mille!

[fcaldera]

https://developer.mozilla.org/en/DOM/window.setTimeout

Executes a code snippet or a function after specified delay.

Syntax
var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
var timeoutID = window.setTimeout(code, delay);

[maxmozz]

Grazie! Avevo proprio risolto prima! ;D

[maxmozz]

Scusatemi ho utilizzato la funzione setTimeout e funziona, ma genera un fatto strano.

Ho la funzione sposta(n) che riceve in argomento un numero intero casuale e in base a quello sposta un div. La funzione viene richiamata all'interno di un ciclo for che ad ogni ciclo genera un nuovo numero da passare alla funzione.

Se richiamo la funzione così:

sposta(num);

funziona tutto perfettamente, mentre se la richiamo così:

setTimeout("sposta(num)", 1000);

è come se la funzione riceve in argomento solo l'ultimo numero generato all'ultimo ciclo. Infatti il div che si sposta è sempre lo stesso. Per lo meno si sposta con un secondo di ritardo come indicato!

Qualcuno sa dirmi come mai? Dove sbaglio?

Ecco qua il codice.

<script language="Javascript">

function sposta(n) {

	if (n == 1)
 		$(".div1").animate({"left": "+=10px"}, "fast");
 	
 	else if (n == 2)
 		$(".div2").animate({"left": "+=10px"}, "fast");
 	
 	else if (n == 3)
 		$(".div3").animate({"left": "+=10px"}, "fast");
 		
 	else if (n == 4)
 		$(".div4").animate({"left": "+=10px"}, "fast");

}

for(var i=0; i<=10; i++) {

	var num = Math.round(4*Math.random());

	document.write(num); // Numeri stampati per info

	setTimeout("sposta(num)", 1000);
}

</script>

[fcaldera]

mai mai mai mai mai mai e poi MAI passare stringhe a setInterval/setTimeout

se devi passare un argomento alla funzione scrivi

setTimeout(function() {
   sposta(num);
}, 1000);

[maxmozz]

Chiedo umilmente perdono!

Comunque ho corretto ma il risultato è sempre lo stesso... Non capisco perché faccia così, dovrebbe richiamare la funzione di ciclo in ciclo con il numero casuale generato, e invece la funzione viene sempre richiamata con l'ultimo numero generato!

[carlomarx]

Originariamente inviato da maxmozz
Chiedo umilmente perdono!

Comunque ho corretto ma il risultato è sempre lo stesso... Non capisco perché faccia così, dovrebbe richiamare la funzione di ciclo in ciclo con il numero casuale generato, e invece la funzione viene sempre richiamata con l'ultimo numero generato!

Se ti sta bene che non funzioni su IE, una possibile soluzione è questa:

setTimeout(sposta, 1000, num);

un'altra possibiltà (che io personalmente odio) è questa:

setTimeout("sposta(" + num + ")", 1000);

[maxmozz]

Ti ringrazio!

Il problema ora è un altro. Nei metodi che hai indicato tu, così richiama la funzione, attende un secondo e sposta tutti i div assieme in base ai numeri ottenuti. Ciò che io vorrei facesse è che ad ogni ciclo attende un secondo e sposta il div interessato. Per il ciclo successivo stessa cosa, e così via...

È come se quando esce dal ciclo for tira le somme e sposta i div in base ai numeri ottenuti... Non dovrebbe svolgere le azioni di ciclo in ciclo? :O

Spero di essermi spiegato! Grazie!

[lucavizzi]

Il ciclo for lancia i setTimeout a pochi millesimi di secondo di distanza l'uno dall'altro, perciò l'impressione è che i div vengano spostati simultaneamente.
Una soluzione porebbe essere rendere ricorsiva la funzione "sposta":

function sposta(n){
   ...
   setTimeout("sposta(n)",1000);
}

[maxmozz]

In realtà anche se richiamo la funzione al di fuori di un ciclo for mi fa lo stesso giochetto.
Correggetemi se sbaglio. Scrivendo questo codice:

var num = Math.round(4*Math.random());

setTimeout("sposta(" + num + ")", 2000);
setTimeout("sposta(" + num + ")", 2000);

e supponendo che il numero generato sia 3, dovrebbe attendere due secondi e spostare il div3 e attendere ulteriori due secondi e spostare nuovamente il div3. Però non è ciò che fa! Attende due secondi e sposta il div3 due volte.