Callback Fonksiyonlar

nhtctn nhtctn

Javascript asenkron çalışan bir programlama dili olduğu için bir fonksiyonun işlemini tamamlaması beklenmeden bir sonraki fonksiyona geçiş yapılır. Bu durum birçok programlama dilinde karşımıza çıkmadığı için Javascript ile yeni ilgilenenler için baş ağrısı yaratabilir. 

 Ancak Callback Fonksiyonları öğrendikten sonra işimizin o kadar da zor olmadığını anlayacağız.

Javascript ’in çalışma mantığını anlamak için basit bir senaryo düşünelim, bir restorantta arka arkaya iki müşteri sipariş verecek bunlardan ilki bir İskender , ikincisi ise bir bardak su istiyor. İskender’in servis edilmesi tabiki bir bardak sudan daha uzun sürecek ve ikinci müşteri suyunu aldığında ilk müşteri hala bekliyor olacak. Burada ilk müşterinin siparişi, ikinci müşterinin siparişine engel olmamakta yani restorant asenkron olarak servis vermekte diyebiliriz.

Eğer yukarıdaki örnek çok bir şey ifade etmediyse gelin birde senkron çalışan bir kod yapısından bahsedelim. Mesela Php ile MySQL bağlantısı gerçekleştirdiğinizde bu işlem biraz zaman alabilir ancak sunucunuz bağlantınız gerçekleşene kadar bekleyecek ve diğer komutlarınızı çalıştırmayacak. Eğer bağlantı yapılırken diğer komutlarınız çalıştırılsaydı database bağlantınızı kullanarak yazdığınız metotlarda hata alacaktınız. Yani senkron yapıda bir fonksiyon kendinden sonra gelen fonksiyonları bloklarken , asenkron yapıda bloklama yapılmaz.

Hadi biraz kod yazarak detaylandıralım. İlk olarak 2 farklı fonksiyon tanımlayalım ve bunları sırasıyla çağıralım.

function adimiYaz(ad) {
    console.log("Adiniz : " + ad);
}

function soyadimiYaz(soyad) {
    console.log("Soyadiniz : " + soyad);
}
adimiYaz("Nihat");
soyadimiYaz("ÇETİN");

Burada standart biçimde iki fonksiyon oluşturduk ve çalıştırdık.

Yukarıdaki gibi bir çıktı almamız son derece normal çünkü iki fonksiyonda hızlı bir biçimde işlemini tamamladı.

Şimdi farzedelimki adimiYaz işlemini iki saniyede tamamlayabiliyorken soyadimiYaz işlemini bir saniyede tamamlıyor. Örnek olması için ben bu tamamlanma sürelerini setTimeout fonksiyonunu kullanarak düzenleyeceğim. setTimeout fonksiyonu genelde çalıştırılacak fonksiyona bir gecikme süresi koymak için kullanılır.

function adimiYaz(ad) {
    setTimeout(function () {
        console.log("Adiniz : " + ad);
    }, 2000);
}

function soyadimiYaz(soyad) {
    setTimeout(function () {
        console.log("Soyadiniz : " + soyad);
    }, 1000);
}
adimiYaz("Kadir");
soyadimiYaz("Kasim");

Normal de biz bu kod bloğundan iki saniye sonra ‘Adiniz : Nihat’ , daha sonra bir saniye daha bekleyip ‘Soyadiniz : ÇETİN’ yazdırmasını bekleriz. Ancak bizim ekran çıktımız :

Peki biz adimiYaz fonksiyonunun işlemini tamamlanmasını beklemek istersek ne yapacağız. Bunun için üç yöntem var: Callback Fonksiyon , Promise , Async Await . Bu yazıda sadece Callback Fonksiyondan bahsedeceğim. Sonra sırasıyla Promise ve Async Await kullanımlarını da ayrıntılı olarak anlatmaya çalışacağım.

Callback Fonksiyon, bir fonksiyona parametre olarak gönderip sonra geri çağırdığımız fonksiyonlardır. Basitçe böyle ifade edebiliriz. Yukarıdaki örneğimizde ise yapmamız gereken şey soyadimiYaz fonksiyonunu Callback fonksiyon olarak adimiYaz fonksiyonuna göndermek. Hemen yapalım :

function adimiYaz(ad, callback) {
    setTimeout(function () {
        console.log("Adiniz : " + ad);
        callback('ÇETİN');
    }, 2000);
}

function soyadimiYaz(soyad) {
    setTimeout(function () {
        console.log("Soyadiniz : " + soyad);
    }, 1000);
}
adimiYaz("Nihat", soyadimiYaz);

Gördüğünüz gibi soyadimiYaz fonksiyonunu adimiYaz fonksiyonuna bir parametre olarak gönderdik ve çağırdık. Ve kodumuz iki saniye bekleyip ‘Adiniz : Nihat’ sonra bir saniye daha bekleyip ‘Soyadiniz : ÇETİN’ yazdırdı.

Yorum yazın

BENZER YAZILAR