Home » Jquery » Efek jQuery : Fungsi Callback – Kode dan Contohnya

Efek jQuery : Fungsi Callback – Kode dan Contohnya

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Fungsi callback dijalankan setelah efek saat ini 100% selesai.

Fungsi jQuery Callback

Pernyataan JavaScript dijalankan baris demi baris. Namun, dengan efek, baris kode berikutnya dapat dijalankan meskipun efeknya belum selesai. Hal ini dapat membuat kesalahan.

Untuk mencegahnya, kita dapat membuat fungsi callback.

Fungsi callback dijalankan setelah efek saat ini selesai.

Contoh :

Contoh di bawah ini memiliki parameter callback yang merupakan fungsi yang akan dijalankan setelah efek sembunyikan selesai:

Contoh dengan Callback :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide("slow", function(){
      alert("The paragraph is now hidden");
    });
  });
});
</script>
</head>
<body>

<button>Hide</button>

<p>Ini adalah paragraf dengan sedikit konten.</p>

</body>
</html>

Contoh di bawah ini tidak memiliki parameter panggilan balik, dan kotak peringatan akan ditampilkan sebelum efek sembunyikan selesai:

Contoh tanpa Callback :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
    alert("The paragraph is now hidden");
  });
});
</script>
</head>
<body>

<button>Hide</button>

<p>Ini adalah paragraf dengan sedikit konten.</p>

</body>
</html>

You may also like