Search

Javascript Asenkron Fonksiyon Kullanımı (Callbacks, Timeouts)



0 yorum

Javascript Asenkron ve Senkron Fonksiyon Kullanımı (Callbacks, Timeouts)

Öncelikle senkron ve asenkron arasındaki ayrımı cümleler kurmadan anlamamıza olanak sağlayan bir çizimi paylaşacağım.
A,B ve C isimlerinde olaylarımız var. Bu olayların başlama ve bitiş zamanlarına göre senkron, asenkron mantığını anlatan çizim aşağıda gösterilmiştir.
Senkron:
|----A-----||-----B-----------||-------C------|
Asenkron:
 |----A-----|
    |-----B-----------| 
        |-------C------|
Javascript dilinde çoğunlukla senkron fonksiyonları kullanıyoruz.
Senkron(Synchronous) fonksiyonlar sırasıyla çalışan fonksiyonlardır. Örneğin birinci, ikinci ve ucuncu isimlerinde fonksiyonlarımız olsun. Biz bu fonksiyonları aşağıdaki gibi çağırırsak genellikle birbiri ardına çalışacaktır.

$("document").ready(function(){
    birinci();
    ikinci();
    ucuncu();
});

function birinci()
{$("div").append("1

")}

function ikinci()
{$("div").append("2

")}

function ucuncu()
{$("div").append("3

")}

Bu fonksiyonun çıktısı 1,2,3 şeklinde olacaktır.
JSFiddle*:

Ancak bazı senaryolarda bu çağırma şekliyle fonksiyonların, birbirlerinin çalışmasını bitirmeden çalıştıklarını görebilirsiniz. Bu konuyu aşağıdaki başlık altında inceleyeceğiz.


Asenkron(Asynchronous) Fonksiyonlar

Asenkron fonksiyonların çalışma mantığıysa senkron fonksiyonların tam tersidir. Bu fonksiyonlar birbirlerinin çalışmasını bitirmesini beklemezler. Sıralamadan bağımsız hareket ederler. Anlatımımı basit bir örnek üzerinden sürdüreceğim.

HTML:

Kaybolacak ifade

JavaScript:
$("document").ready(function(){
    birinci();
    ikinci();
});
 
function birinci()
{
    $("h1").hide(2000); //2 sn içinde kaybolacak
}
 
function ikinci()
{
    $("#alan").append("kayboldu");
}

Sonuçları JSFiddle üzerinden aşağıda paylaşıyorum.
JSFiddle*:


Yukarıdaki örnek kodumuzda, ekranda yer alan h1(Kaybolacak ifade) elementinin gizlenmesini istiyoruz, h1 elementi gizlendikten sonra ekranda kayboldu paragrafını göstermek istiyoruz. Ancak bu senaryo çalıştırıldığında ekranda h1 elementi kaybolmadan önce kayboldu paragrafını göreceksiniz. Çünkü burada fonksiyonlar birbirlerinin çalışmasını bitirmesini beklemedi, asenkron çalıştılar. Bazı senaryolarda asenkron kullanımını biz oluşturabiliriz yada asenkron yapıları senkronlaştırabiliriz.  Bu gibi durumlarda imdadımıza Callbacks ve Timeouts özellikleri yetişiyor.

Callbacks

Javascript kullanımına esneklik kazandıran en önemli faktörlerden biri tip bağımsız çalışmasıdır. O kadar bağımsızlık vardır ki fonksiyonlarımızı bile parametre olarak farklı bir fonksiyona gönderebiliyoruz. Parametre olarak gönderilen fonksiyonlarsa istenilen bir anda çalıştırılmaya başlanabiliyor, bu durum fonksiyonlarımızı asenkron yada senkron çalıştırmak için bizlere imkan tanıyor. Yukarıdaki örneğimizi istediğimiz şekilde gerçekleştirebilmek için(asenkron yapıyı senkronlaştırmak), callback kullanıyoruz. Html kodlarımız aynı, sadece javascript kodlarımızı güncelliyoruz:

JavaScript:
$("document").ready(function(){
    birinci();
});

function birinci()
{
    //burada 2 sn belirttikten sonra ikinci(callback) yazarak, 
    //işlem bittikten sonra ikinci fonksiyonun çalışması gerektiğini belirtmiş oluyoruz.
    $("h1").hide(2000, ikinci); //2 sn sonra ikinci fonksiyon devreye girecektir.
}

function ikinci()
{
    $("#alan").append("kayboldu

");
}

JSFiddle*:
Bu örneğimizi çalıştırdığımız zaman, div elementi kaybolduktan sonra kayboldu alertımızın çalıştığını göreceksiniz. Burada callback metodu ile asenkron bir yapıyı senkronlaştırmış olduk. Callback ile ilgili çeşitli örnekler oluşturabilirsiniz.


Timeouts

Timeout kullanımı bize belirlediğimiz bir süre sonunda bazı işlemlerin gerçekleştirilmesini sağlama imkanı tanır. Bir bakıma bu özellik javascript üzerinde zamanı kontrol etmemizi sağlar. Örneğimizi setTimeout metoduyla nasıl gerçekleştireceğimizi görelim:

JavaScript:

$("document").ready(function(){
    birinci();
    setTimeout(ikinci , 2000); //ikinci fonksiyonun 2 sn sonra başlayacak
});
 
function birinci()
{
    $("h1").hide(2000); //2 sn içinde kaybolacak
}
 
function ikinci()
{
    $("#alan").append("kayboldu

");
}

JSFiddle*:
Kodlamamızda birinci fonksiyonumuzu çalıştırıyoruz ve ikinci fonksiyonumuzu setTimeout metoduna girdiriyoruz. Bu metodun 2 sn sonra çalışması gerektiğini söylüyoruz ve senaryo istediğimiz gibi gerçekleşiyor. Timeout kullanımı bu örnek için uygundur ancak bitiş zamanı tahmin edilemeyen fonksiyonlar için riskli bir kullanım olabilmektedir.
Faydalı olması dileğiyle.

*Not: JSFiddle üzerindeki sonuçların nasıl çalıştığını tekrar görmek için Result sekmesine tıklamanız gerekmektedir.

0 yorum:

Yorum Gönder

Check Page Rank
DMCA.com