Salve a tutti!
Non so se è già capitato a qualcuno, ma mi trovo nella situazione in cui i metodi setTimeout o setInterval dell'oggetto window non soddisfano esattamente le mie esigenze. Vorrei ottenere un allungamento graduale di un'immagine di dimensione 1x1 agendo sulla sua proprietà "width", ma se uso il seguente codice (dove il parametro 'w' è la larghezza finale a cui voglio portare la mia immagine, e 'line' è l'id dell'immagine):
for (var i=1;i<=w;++i) document.getElementById('line').width=i;
ovviamente me lo esegue in una frazione di secondo!
Le ho provate tutteusando setTimeout e setInterval, ma senza successo (in pratica, se ho capito bene, questi due metodi mettono i comandi in "coda" ma continuano ad eseguire le istruzioni seguenti, mentre a me servirebbe che lo script si arrestasse del tutto prima di incrementare 'i' e assegnarlo a document.getElementById('line').width).
Ora ottengo il risultato desiderato così:
var i=0;
var t1;
function line(w)
{
var imgpath="../images/whitedot.bmp";
document.write("<img id=\"line\" src=\""+imgpath+"\" width=\"1\" height=\"1\" style=\"position: absolute; left: 25; top: 77; z-index: 1\">");
t1=window.setInterval("allarga("+w+");",20);
}
function allarga(w)
{
if (i<=w)
{
++i;
document.getElementById('line').width=i;
}
else window.clearInterval(t1);
}
e, nel body, chiamo la funzione line() passandole un intero w così:
<script language="javascript">
line(157);
</script>
che crea questa linea e la allunga gradualmente.
Ora, ne converrete che la soluzione che adopero attualmente è poco elegante, per via delle variabili globali i e t1 e considerando anche che vi ho esposto il problema "esemplificandolo" perché in realtà la mia funzione non si chiama "line" ma "rectangle", pensate che devo disegnare altri 3 lati nella stessa maniera!!!VVoVe:
Ringrazio anticipatamente chi mi vorrà dare una mano!
Andrea
Rispondi quotando
