Lezione #id-jq-2013-0014#
In JavaScript il codice viene eseguito riga per riga, indipendentemente dal fatto che un effetto o un’animazione sia giunta al termine, questo può generare degli errori. La funzione – callback – consente di avviare un’animazione solo quando è terminata la precedente..
Vediamo i seguenti snippet di codice:
$("button").click(function(){
$("p").hide("slow");
alert("Il paragrafo è stato nascosto!");
});
Questo codice genera un errore evidente, apparirà la finestra con il messaggio – “Il paragrafo è stato nascosto!” – prima che il paragrafo venga effettivamente nascosto. Infatti il paragrafo impiega qualche secondo per essere nascosto, la finestra invece si aprirà immediatamente.
Montiamo il codice con il callback
$("button").click(function(){
$("p").hide("slow",function(){
alert("Il paragrafo è stato nascosto!");
});
});
Il codice sopra permette alla finestra di allerta di aprirsi solo dopo che il metodo hide() avrà terminato il suo effetto a video.
Vediamo un esempio pratico:
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script>
$(document).ready(function(){
$("#button1").click(function(){
$("#paragrafo1").hide("slow",function(){
alert("Il paragrafo 1 è stato nascosto");
});
});
$("#button2").click(function(){
$("#paragrafo2").hide(1000);
alert("Il paragrafo 2 è stato nascosto");
});
});
</script>
</head>
<body>
<button id="button1">Nascondi il paragrafo CON CALLBACK</button>
<p id="paragrafo1"><strong>PARAGRAFO 1</strong> -Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
<br><br>
<button id="button2">Nascondi il paragrafo SENZA CALLBACK</button>
<p id="paragrafo2"><strong>PARAGRAFO 2</strong> -Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</body>
</html>
