Kadir Kasim | Freelance Code Developer

kadir kasim


Yıldız Teknik Üniversitesi Mezunu

Matematik Mühendisi

Yazılımcı

California - Kütahya - İstanbul - Maryland güzargahında 29 yıllık göçebe bir yaşam

Kız labrador babası

Kitapsever keyif insanı

Rüyalarınızı gerçekleştirmenin en iyi yolu uyanmaktır.

Muhammed Ali

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. mutlu Ancak Callback Fonksiyonları öğrendikten sonra işimizin o kadar da zor olmadığını anlayacağız.

Javascriptin çalışma mantığını anlamak için basit bir senaryo düşünelim, bir restorantta arka arkaya iki müşteri sipariş verecek bunlardan ilki bir iskender , ikincisi ise bir bardak su istiyor. İskenderin 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 methodlarda 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("Kadir"); soyadimiYaz("Kasim");

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

Adiniz : Kadir Soyadiniz : Kasim

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 tamamlıyabiliyorken 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 : Kadir' , daha sonra bir saniye daha bekleyip 'Soyadiniz : Kasim' yazdırmasını bekleriz. Ancak bizim ekran çıktımız :

Soyadiniz : Kasim Adiniz : Kadir

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('Kasim'); },2000); } function soyadimiYaz(soyad) { setTimeout(function(){ console.log("Soyadiniz : " + soyad); },1000); } adimiYaz("Kadir" , 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 : Kadir' sonra bir saniye daha bekleyip 'Soyadiniz : Kasim' yazdırdı.

Adiniz : Kadir Soyadiniz : Kasim

Örneklerde kullandığım kodlara GitHub üzerinden de erişebilirsiniz.

Js | Callback Fonksiyon üzerine yorumlar

Çok teşekkür ederim. Bu kadar kolay anlayabilmemmi sağladığınız için minnettarım. İyi çalışmalar dilerim. Sorum olduğu zaman ilk size soracağım, müsait olursanız cevap verceğiniz umuyorum.

Yorumunuz için ben teşekkür ederim. Ne zaman sorunuz olursa sorabilirsiniz tabii ki.

Tartısmaya Katılmak İster Misiniz ?

Eposta adresiniz paylasılmayacaktır..

Daha Önceki Yazılar