jQuery - Callback (Povratni poziv)

jQuery funkcije povratnog poziva (Callback)

JavaScript izrazi izvršavaju se red po red. Pošto jQuery efektu treba neko vrijeme da završi sljedeći red, kod se može izvršiti dok je prethodni efekt još uvijek aktivan. Kako se to ne bi dogodilo, jQuery nudi funkciju povratnog poziva (Callback) za svaku metodu. Funkcija povratnog poziva je funkcija koja se izvršava nakon završetka efekta. Funkcija povratnog poziva prosljeđuje se kao argument metodama efekata i one se obično pojavljuju kao posljednji argument metode. Na primjer, osnovna sintaksa jQuery metode efekta slideToggle() s funkcijom povratnog poziva može se napisati kao: 

$(selector).slideToggle(duration, callback);

Razmotrimo sljedeći primjer u kojemu smo naredbe slideToggle() i alert() postavili jednu pored druge. Ako isprobate ovaj kod, upozorenje će se prikazati odmah nakon što kliknete dugme, bez čekanja da se završi slide toggle efekt. 

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow");
        alert("Slide toggle efekat je završen.");
    });   
});
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer jQuery Efekta povratnog poziva funkcije (Callback Function)</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        background:yellow;
        font-size: 24px;
        padding:20px;
    }
</style>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow");
        alert("Slide toggle efekat je završen.");
    });   
});
</script>
</head>
<body>
    <p>IT TUTORIJALI.</p>
    <button type="button">Klikni!</button>
</body>
</html>

Pogledajmo sada izmijenjene verzije primjera u kojem smo stavili metodu statement() unutar funkcije povratnog poziva za metodu slideToggle(). Ako isprobate ovaj kod, poruka upozorenja prikazaće se nakon završetka efekta. 

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow", function(){
            // Kod koji treba izvršiti nakon završetka efekta
            alert("Slide toggle efekat je završen.");
        });
    });   
});
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer jQuery Metode efekta sa povratnim pozivom funkcije (Callback Function)</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        background:yellow;
        font-size: 24px;
        padding:20px;
    }
</style>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow", function(){
            alert("Slide toggle efekat je završen.");
        });
    });   
});
</script>
</head>
<body>
    <p>IT TUTORIJALI.</p>
    <button type="button">Klikni!</button>
</body>
</html>

Slično tome, možete definisati funkcije povratnog poziva za druge metode u jQuery-u, poput: show(), hide(), fadeIn(), fadeOut(), animate() itd. 

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1, p").slideToggle("slow", function(){
            // Kod koji treba izvršiti nakon završetka efekta
            alert("Slide toggle efekat je završen.");
        });
    });   
});
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer jQuery Povratnog poziva (Callback) koji se izvršava više puta </title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    h1{
        display:none;
        background:red;
        padding:20px;
    }
    p{
        background:yellow;
        font-size: 24px;
        padding:20px;
    }
</style>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1, p").slideToggle("slow", function(){
            alert("Slide toggle efekat je završen.");
        });
    });   
});
</script>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <p>Volim učiti jQuery uz IT TUTORIJALE.</p>
    <button type="button">Klikni!</button>
</body>
</html>

Ako isprobate primjer koda, prikazaće istu poruku upozorenja dva puta jednom za element <h1>, a drugi put za element <p>, kada kliknete na dugme.