jQuery Callback Fonksiyon Kullanımı

jQuery'de yazdığımız kodlar satır satır yürütülür. Ancak bazı durumlarda kodlarımızın sırayla çalışmasını istemeyebiliriz. Bu durumda fonksiyonları kullanırız.

Callback Fonksiyon Nedir ?

Bir fonksiyonun çalışması bittikten sonra, başka bir fonksiyonun çalışmasını tetikleyen fonksiyonlar callback function olarak adlandırılır. Callback fonksiyonlar asenkron şekilde çalışırlar.

jQuery'de callback fonksiyonun temel sözdizimi şu şekildedir.

$(seçici).hide(hız,callback);

Şimdi bir örnek yapalım. Mesela bir öğeyi gizleme işlemi yapalım. İşlem bittikten sonra alert mesajı ile öğe gizlendi yanıtını kullanıcıya gösterelim.

<!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("Paragraf gizlendi.");
    });
  });
});
</script>
</head>
<body>
<button>Gizle</button>
<p>Bu paragraf butona basında gizlenecek.</p>
</body>
</html>

Aşağıdaki örnekte ise callback parametresi olmadığı için paragraf gizlenmeden önce element gizlenecektir.

<!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("Bu alert mesajını kapatınca paragraf gizlenecek");
  });
});
</script>
</head>
<body>
<button>Gizle</button>
<p>Ben sıradan bir paragrafım.</p>
</body>
</html>


Örnekleri incelediğimiz zaman callback fonksiyonların aslında bize hiç yabancı olmadığını sürekli kullandığımızı görürüz. Eğer callback fonksiyonlara yeterince hakimseniz jquery kütüphanesini öğrenmeniz fazla uzun zaman almayacaktır.

Esen kalın.

YAZAR HAKKINDA

26 Yaşında. Araştırmayı seven, bir şeyler öğretmeye meraklı bir Bilgisayar Mühendisi

0 YORUM

Bu konuya henüz yorum yapılmamış

Yorum Yap

@COPYRIGHT KodlamakLazım Tüm Hakları Saklıdır.