Visualizzazione dei risultati da 1 a 2 su 2
  1. #1

    tanti setTimeout insieme: può crearsi qualche intoppo?

    nel documento html c'è un div all'interno del quale c'è un'immagine
    codice:
    <div id="containeromino" style="position:absolute; left:1150px; top:500px;">
    		[img]frame-1.png[/img]
    	</div>
    l'immagine all'interno del div è un omino animato, che cammina: per animarlo ovviamente ho dovuto creare dei frame dell'immagine (sono 26) e animarli con un setInterval. l'omino vvoiamente non è "sun un tapis roulant", quindi devo farlo anche muovere lungo un percorso. a questo ci pensa il div che contiene l'immagine: con un setInterval faccio in modo che la proprietà left del div scali mano a mano di un px. così il div si muove, l'immagine si anima e l'omino sembra che cammini.

    questo è l codice: ho creato una funzione per fissare l'inizio del setInterval: tuttavia l'immagine non può muoversi all'infinito, ragion per cui ho dovuto anche inseire un clearInterval
    codice:
    //individua l'immagine-omino
    var containeromino = $("#containeromino");
    var omino = $("#omino");
    // setta un timeout che chiama l'inizio dell'intervallo dopo uno specifico tempo: l'intervallo prende luogo
    // e viene cancellato quando si raggiunge il tempo fissato in end (viene chiamato  un nuovo timeout che contiene il clearinterval
    function movement(f, start, int, end){
                   //con un valore a start maggiore di zero il setInterval può cominciare con un piccolo ritardo, volendo.
    		setTimeout(iteration, start);            
    		function iteration() {
    			interval = setInterval(f, int);
                  //se passo anche l'argomento end facio in mod che l'animazione termini
    		if(end) setTimeout( function(){clearInterval(interval)}, end);
    	}
    }
    
    var mx = 1150;
    function move(){
    	containeromino.css("left", mx+"px");
    	mx--
    }
    movement(move, 10, 20, 6000);
    
    
    var x = 1;
    function changeframe(){
    	omino.attr("src", "tavole-"+x+".png");
    	x++;
    	if (x>25) x=1;
    }
    movement2(changeframe, 0, 40, 6000);
    i movimenti cominciano e si attivano tutti nel modo giusto,l'animazione prende il via come dovrebbe, si sviluppa come dovrebbe ma non si ferma come dovrebbe: purtroppo capita che un movimento si fermi (quello del div), mentre l'altro, quello dell'omino che cammina, non si fermi al tempo stabilito.
    facendo varie prove ho potuto notare che "spezzando il codice", vale a dire eliminando uno dei due movimenti, l'altro, quello che rimane, sicuramente termina al tempo stabilito.
    come mai accade ciò? vorrei che entrambe le animazioni si fermassero al tempo stabilito

  2. #2
    sarà comico eppure proprio pochi secondi dopo aver inviato la discussione mi si è accesa la lampadina e ho capito il motivo. lo scrivo e lo lascio ai posteri:
    praticamente è a causa di questo(ho evidenziato in rosso)
    codice:
    function movement(f, start, int, end){
                   //con un valore a start maggiore di zero il setInterval può cominciare con un piccolo ritardo, volendo.
    		setTimeout(iteration, start);            
    		function iteration() {
    		interval = setInterval(f, int); 	
                  //se passo anche l'argomento end facio in mod che l'animazione termini
    		if(end) setTimeout( function(){clearInterval(interval)}, end);
    	}
    }
    la funzione interval così definita è una funzione globale ed è chiaro che viene occupata da uno solo dei due movimenti: il primo che la chiama quello si aggiudica il clearinterval.
    la soluzione? semplicemente un var prima di quell' "interval".

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.