Bu yazımızda jQuery’de Callback fonksiyonu nedir? Nasıl kullanılır? uygulamalı örnekler üzerinden öğreneceğiz.
Bildiğiniz gibi jQuery’de birçok efekt fonksiyonu bulunuyor. İşte callback fonksiyonu, o an aktif olan efektin tamamen bitmesinden sonra çalışan fonksiyondur.
JavaScript’te kodlar satır satır ilerleyerek çalışır. Örneğin 3 saniye sürecek bir efekt kodu yazdınız diyelim. Bu efektin bitmesi beklenmeden bir sonraki satırdaki kodlar çalıştırılır. Bu durum bazen hatalara neden olabilir.
Eğer efektin tamamen bitmesinden sonra diğer kodlarınızın çalışmasını istiyorsanız bu kodları callback fonksiyonu içerisinde yazmalısınız.
Konunun daha iyi anlaşılabilmesi için şöyle bir örnek yapalım.
⇒ 1 div etiketi ve 2 button etiketi oluşturalım.
⇒ Butonların click olaylarında div’e toggle fonksiyonu ile 3 saniyede gerçekleşecek şekilde gizle – göster efekti verelim.
⇒ Birinci butona tıklandığında gerçekleşecek olan efekt tamamen bittikten sonra yani callback fonksiyonu içerisinde alert ile bir uyarı mesajı verdirelim.
⇒ İkinci butona tıklandığında ise alert mesajını callback fonksiyonu olmadan verdirelim.
⇒ İlk butona tıklandığında gerçekleşecek olan efekt tamamen bittikten sonra yazdığımız alert mesajı gösterilecek. İkinci butona tıklandığında ise alert mesajı gösterildikten sonra efekt devam edecek.
Artık jQuery callback fonksiyonunun kullanımına bir uygulama üzerinden bakalım.
Html Kodları
|
1 2 3 4 5 6 |
<button id="callback">Callback (+)</button> <button id="notCallback">Callback (-)</button> <div id="box"></div> |
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
button{ padding: 10px; background-color: tomato; color: #fff; border:none; margin-bottom:15px; } #box{ width: 100%; height: 200px; background-color: blueviolet; } |
jQuery Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> $(document).ready(function() { $("#callback").click(function() { $("#box").toggle(3000, function() { alert("Message"); }); }); $("#notCallback").click(function() { $("#box").toggle(3000); alert("Message"); }); }); |
Uygulamamızın son hali aşağıdaki gibi olacaktır.
Umarım “jQuery Callback Fonksiyonu Nedir? Nasıl Kullanılır?” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
jQuery Document Ready Fonksiyonu Nedir? Nasıl Kullanılır?
Yeni bir yazımda görüşmek üzere.
