Ciao a tutti
sto studiando un'animazione DHTML di una farfalla che volteggia nel canvas del browser (l'animazione non è mia ma potete scaricarla a http://www.chalcedony.com/javascript), e ho provato ad inserire dei pulsanti per attivare/fermare l'animazione.
<code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Butterfly</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script type="text/javascript" language="Javascript">
<!-- Hide script from older browsers
firstTime = true
var attesaTimer = 20
var idTimer
if (document.getElementById) {
stdBrowser = true
}
else {
stdBrowser = false
}
function moveIt() {
if (firstTime) {
if (stdBrowser) {
moverObj = document.getElementById("mover").style
moverObj.top = "5px"
moverObj.left = "5px"
}
if (document.all) {
maxHeight = document.body.clientHeight-40
maxWidth = document.body.clientWidth-40
}
else {
maxHeight = window.innerHeight-40
maxWidth = window.innerWidth-40
}
firstTime = false
}
if (stdBrowser) {
topPos = parseInt(moverObj.top)
leftPos = parseInt(moverObj.left)
}
else {
topPos = document.mover.top
leftPos = document.mover.left
}
chgXBy = Math.floor(Math.random() * 10)
if ((halfChance() || topPos >= maxHeight) && topPos > 5) {
topPos -= chgXBy
}
else {
topPos += chgXBy
}
chgYBy = Math.floor(Math.random() * 10)
if ((halfChance() || leftPos >= maxWidth) && leftPos > 5) {
leftPos -= chgYBy
}
else {
leftPos += chgYBy
}
if (stdBrowser) {
moverObj.top = topPos + "px"
moverObj.left = leftPos + "px"
}
else {
document.mover.top = topPos
document.mover.left = leftPos
}
idTimer = setTimeout("moveIt()",attesaTimer)
}
function halfChance() {
if (Math.random() < .5) {
return true
}
return false
}
function Ferma() { clearTimeout(idTimer) }
// End hiding script -->
</script>
<style type="text/css">
<!--
#mover {position: absolute; left: 5px; top: 5px;}
-->
</style>
</head>
<body onload="moveIt()" lang="it">
<div id="mover">
[img]img/butterfly.gif[/img]
</div>
<div id="centroPagina">
<form name="fermaAnim">
<input type=button value="Ferma l'animazione" onclick="javascript:stdBrowser=false;Ferma()" />
<input type=button value="Riattiva l'animazione" onclick="javascript:stdBrowser=true;moveIt()" />
</form>
</div>
</body>
</html>
</code>
Se cliccco per fermare l'animazione si ferma, se clicco per farla ripartire, riparte ma se clicco per riavviarla senza averla fermata essa accelera.
Quindi mi chiedo: dopo il primo riavvio senza aver fermato, quante istanze di funzione restano in memoria? a me sembra 2. Infatti il delay del timeout diminuisce e l'animazione accelera.
Allora ho risolto impostando il timeout a zero tramite variabile e imponendo una condizione:
<script type="text/javascript" language="Javascript">
<!-- Hide script from older browsers
firstTime = true
var attesaTimer = 20
var idTimer
if (document.getElementById) {
stdBrowser = true
}
else {
stdBrowser = false
}
function moveIt() {
if (firstTime) {
if (stdBrowser) {
moverObj = document.getElementById("mover").style
moverObj.top = "5px"
moverObj.left = "5px"
}
if (document.all) {
maxHeight = document.body.clientHeight-40
maxWidth = document.body.clientWidth-40
}
else {
maxHeight = window.innerHeight-40
maxWidth = window.innerWidth-40
}
firstTime = false
}
if (stdBrowser) {
topPos = parseInt(moverObj.top)
leftPos = parseInt(moverObj.left)
}
else {
topPos = document.mover.top
leftPos = document.mover.left
}
chgXBy = Math.floor(Math.random() * 10)
if ((halfChance() || topPos >= maxHeight) && topPos > 5) {
topPos -= chgXBy
}
else {
topPos += chgXBy
}
chgYBy = Math.floor(Math.random() * 10)
if ((halfChance() || leftPos >= maxWidth) && leftPos > 5) {
leftPos -= chgYBy
}
else {
leftPos += chgYBy
}
if (stdBrowser) {
moverObj.top = topPos + "px"
moverObj.left = leftPos + "px"
}
else {
document.mover.top = topPos
document.mover.left = leftPos
}
idTimer = setTimeout("moveIt()",attesaTimer)
}
function halfChance() {
if (Math.random() < .5) {
return true
}
return false
}
function Ferma() { idTimer=0 }
// End hiding script -->
</script>
<style type="text/css">
<!--
#mover {position: absolute; left: 5px; top: 5px;}
-->
</style>
</head>
<body onload="moveIt()" lang="it">
<div id="mover">
[img]img/butterfly.gif[/img]
</div>
<div id="centroPagina">
<form name="fermaAnim">
<input type=button value="Ferma l'animazione" onclick="javascript:stdBrowser=false;Ferma()" />
<input type=button value="Riattiva l'animazione" onclick="if(idTimer==0){stdBrowser=true;moveIt()}" />
<input type=button value="mostra il valore di idTimer" onclick='alert("Il riferimento del timer è 0?: " + idTimer)' />
</form>
</div>
</body>
</html>
il metodo clearTimeout() (o clearInterval()) sembra non essere all'altezza.
Spiegatemi un po' se volete.
Mi spiace per la lunghezza del topic.
Ciao a3tius
Io non ho messo il trattino in javascript ma appare da solo...(??? come mai?)
Rispondi quotando