Timeout() la funzione prosegue al di là di questa istruzione

di
davidededox
il
4 risposte
D
davidededox
Pochi posts
Iscritto da
lug, 2019
Messaggi:
5

Timeout() la funzione prosegue al di là di questa istruzione

Buongiorno a tutti,
sono Davide e sono un programmatore PHP, tuttavia per ovvie necessità sto cercando di imparare al meglio il Javascript per necessità impellenti, tuttavia ci sono dei passaggi che mi sfuggono e spero che su questo Forum ci siano persone preparate e disponibili per poter condividere insieme problematiche e intuizioni.
Vorrei intanto capire un passaggio, sto creando un semplicissimo slide dinamico, però ho già trovato le prime difficoltà,
non capisco perchè la funzione prosegue anche con l'istruzione Timeout() non compiendo le azioni per cui era stata inserita.
Vi allego un pò di codice, per cercare di capire dove è l'errore:

window.onload = function(){
// IL PRIMO DIV CREATO SI CHIAMA #container_1 gli altri #container_n
var i = 1;
$('#container_'+i).show(1000);
//INPUT NASCOSTO CON IL NUMERO TOTALE DEI VEICOLI
var ndiv = document.getElementById("n_veicoli").value;
//SCORRO I VEICOLI DA 1 a N_VEICOLI (CIRCA UN CENTINAIO)
for (i = 1; i <= ndiv; i++) {
setTimeout(function() {
$('#container_'+i).hide(1000);
var b = i+1;
$('#container_'+b).show(1000);
},6000);
}
è molto semplice, scorre i veicoli, nasconde il primo e successivamente mostra il ssuccessivo, ripetendolo per il numero di veicoli,
nella mia idea dovrebbe scorrere fermandosi 6 secondi dentro il ciclo, mentre in realtà compie la prima transizione per poi mostrare direttamente l'ultima appena entra nel ciclo e senza aspettare, premesso che so bene che il ciclo termina in maniera erronea, perchè non c'è un controllo sull'ultimo valore, andando così a cercare un div che non esiste, ma come mai questa funzione setTimeout non ferma lo script per i secondi richiesti ??

Grazie in anticipo della possibilità di questa richiesta e delle eventuali spiegazioni che potrò ricevere,
sicuramente è un problema elementare ma ho iniziato ad occuparmi di javascript da neanche un mese,
pertanto sono proprio novizio.

Grazie ancora,
buona giornata
Davide.

4 Risposte

  • D
    davidededox
    Pochi posts
    Iscritto da
    lug, 2019
    Messaggi:
    5

    Re: Timeout() la funzione prosegue al di là di questa istruzione

    Per rendere più comprensibile la questione a livello logico a me non torna nemmeno questo semplice Script: 
    
	function slideShow() {
		window.alert("prova");
	}

	for (i=1; i < 5; i++) {
		setInterval( "slideShow()", 5000 );
}
    Nella mia idea dovrebbe mostrare un alert prova ogni 5 secondi, in realtà entra in un Loop che mostra 5 alert per poi aspettare qualche secondo e rimostrarne altri 5 ...
    Non capisco proprio ....
    sembra che lo script continui anche se ha il setInterval o setTimeout ...
  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3312

    Re: Timeout() la funzione prosegue al di là di questa istruzione

    Con questo pezzo di codice [CODE] for (i=1; i < 5; i++) { setInterval( "slideShow()", 5000 ); stai richiamando 5 volte la funzione setInterval(), quindi stai avviando 5 "processi" (passami il termine) in background che, dopo un'attesa di 5 secondi, eseguiranno il codice indicato, ovvero chiameranno la funzione slideShow().

    L'effetto che ottieni, e che segnali come errato, è quindi perfettamente lecito e normale e corrisponde esattamente al codice che hai scritto.

    Ogni volta che invochi setInterval(), non fai altro che far partire una routine in background che eseguirà il codice passato come parametro allo scadere dell'intervallo specificato. Ogni chiamata alla funzione crea un nuovo processo, ma ovviamente non arresta quelli precedenti.

    Per poter arrestare un processo creato da questa funzione, devi memorizzare il valore di ritorno della chiamata a setInterval() all'interno di una variabile, o dove preferisci, e passare quel valore (che non è significativo o intelligibile per l'utente/sviluppatore) alla chiamata a clearInterval(), che arresterà il processo.

    Non ho capito bene l'effetto che vuoi ottenere, ad ogni modo devi usare la setInterval() solo per "schedulare" l'esecuzione della funzione, ossia farla partire ed eseguire in modo temporizzato, ma sarà poi il corpo della funzione sottoposta all'intervallo a gestire le variabili e a invocare altre eventuali funzioni per gestire - a ogni esecuzione - lo stato delle entità che vuoi gestire (es. elementi della pagina, valori di oggetti, ecc.).

    Prova a rivedere il tuo prototipo usato come PoC (Proof of Concept) in base alle indicazioni fornite sopra per vedere se il concetto ti è stato chiarito.

    Ciao!
  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3312

    Re: Timeout() la funzione prosegue al di là di questa istruzione

    P.S.: se vuoi eseguire la funzione una volta sola, devi usare setTimeout(), poiché setInterval() la ripete fino al suo annullamento con la chiamata alla funzione clearInterval().

    L'uso di setTimeout() ti consente di schedulare una operazione da eseguire "una tantum" allo scadere del periodo specificato, in modo del tutto simile all'altra funzione. L'unica differenza è che il codice viene eseguito una volta sola, anche se nulla vieta di codificare all'interno della funzione che viene chiamata una ulteriore invocazione di setTimeout() per ripetere l'operazione. L'uso di setInterval() automatizza questo processo.
  • D
    davidededox
    Pochi posts
    Iscritto da
    lug, 2019
    Messaggi:
    5

    Re: Timeout() la funzione prosegue al di là di questa istruzione

    Grazie Marco,
    effettivamente dopo vari tentativi ho iniziato a capire il funzionamento di questa funzione, ti ringrazio per il chiarimento esaustivo e preciso,
    per rendere la conversazione di aiuto a chi si dovesse trovare nella mia stessa situazione io ho risolto in questo modo: 
    
<script>
var index=1;
function switch_div(index) {
	var next =index+1;
	$('#container_'+index).slideUp(1500,function(){
	$('#container_'+next).show(1000, function(){
	$('#titolo_'+next).animate({
    fontSize: "4em"}, 3000);
	$('#img_'+next).slideDown(800,function(){
		$('#img_'+next).animate({
			width:"900px",
			marginLeft: '-=50px'},3000);
	});
	});});}
function interval_slide(i,lastDiv) {
		var interval = setInterval(function(){
		switch_div(i);
		if (lastDiv.css("display") == "block"){
		clearInterval(interval);
		location.reload();}
		i++;},10000);}
window.onload = (function(){
	var last = document.getElementById("n_veicoli").value;
	//last=last-1;
	var lastDiv = $('#container_'+last);
	var i = 1;
	$('#container_1').show("slow",function(){
		$('#img_1').slideDown(800);});
		interval_slide(i,lastDiv);});
</script>
    creando l'intervallo che opera in background all'esterno del ciclo creando un Loop con un controllo per l'ultimo div che mi consente di ricaricare la pagina per aggiornare l'elenco delle auto, penso sia molto "domestico" come codice, però fa quello che deve, piano piano spero di poter migliorare anche per condividere insieme le problematiche quotidiane di noi smanettoni che adorano impazzire dietro a queste righe .

    Grazie ancora Marco,
    buona giornata a te e a tutti gli utenti del forum.

    Davide.
Devi accedere o registrarti per scrivere nel forum
4 risposte