jQuery

Belajar jQuery Part 4 : Memahami Callback Function Serta Contohnya

Halo teman -teman salam jumpa kembali di pertemuan yang ke-4 di sesi belajar jQuery. Pada pertemuan ini saya akan mengulas tentang Memahami Callback Fuction serta Contohnya.

Callback function adalah sebuah fungsi jika fungsi efek selesai dijalankan. Misalkan, kamu telah selesai menjalankan effect function dan ingin menjalankan fungsi lagi, maka ini yang disebut dengan Callback function.

Untuk lebih jelas lagi akan saya buatkan contohnya, kita akan membuat contoh Efek fadeIn(), setelah fungsi efek fadeIn() selesai dijalankan, maka kita akan menjalankan lagi fungsi lain(Callback Function). Disini saya tulis kode programnya

Baca: Effect pada jQuery

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Tutorial belajar JQuery Part $ : Mengenal Callback Function</title>	
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Belajar Callback Function jQuery | www.irvannurfazri.com</h1>	
	<button id="tombol">KLIK</button>
	<div class="box"></div>
	<div class="kotak_merah">function callback berhasil di jalankan</div>
</body>
<script type="text/javascript">
	$(document).ready(function(){
		$('#tombol').click(function(){
			$('.box').fadeIn(800,function(){
				$('.kotak_merah').show();
			});
		});
		
	});
</script>
</html>

style.css

body{
	font-family: sans-serif;
}

h1{
	text-align: center;
}

.box{
	height: 300px;
	width:300px;
	background: blue;
	display: none;
}

#tombol{
	padding:10px;
	color: #fff;
	background: #34495E;
	border: none;
}

.kotak_merah{
	padding:50px;
	width: 400px;
	display: none;
	background: red;
}

Perhatikan pada index.html. Disana terdapat sebuah element kotak yang telah diberi class “box” dan sebuah kotak yang berwarna merah, kotak merah ini kita sembunyikan dengan css. Nah untuk contoh Callback Function ini kita membuat kotak merah, apabila tombol “klik” ditekan.

Setelah effect fadeIn() selesai dijalankan, maka akan dilanjutkan dengan fungsi selanjutnya, yaitu Callback Function. Untuk lebih jelasnya silahkan jalankan file yang sudah dibuat tadi.

Callback Function - #IRVANGEN
Callback Function – #IRVANGEN

Bagaimana Bisa Berjalan?

Bisa diperhatikan lagi pada kode program index.html

$('#tombol').click(function(){
	$('.box').fadeIn(800,function(){
		$('.kotak_merah').show();
	});
});

Disini kotak merah ditampilkan setelah fungsi efek selesai dijalankan(.box) kemudian dilanjutkan dengan menjalankan Callback(.kotak_merah) sehingga dapat berjalan sesuai yang ditentukan.


Penutup

Mungkin itu saja yang dapat saya sampaikan di pertemuan ini, tentang Mengenal Fungsi Callback. Jika kurang mengerti atau salah dalam penulisan maupun penyampaian, silahkan diskusikan di form komentar, semoga apa yang sudah kita pelajari dapat bermanfaat bagi kita semua.

Terimakasih.

Written by Irvan Nurfazri
No one can bring you true happiness except Allah. Founder Hobigame.id Instagram : ig.com/irvan_gen Profile

Leave a Reply

Your email address will not be published. Required fields are marked *