v2.5.2
Giriş yap

Js function return

murat34
412 defa görüntülendi

js de bir fonksiyonun içinde birden fazla return varsa ilk return değerini aldıktan sonra diğerleri etkisiz mi kalıyor ?

ebykdrms
894 gün önce

Doğru. Bir fonksiyon çalıştırılırken return ifadesine denk geldiği anda fonksiyon sonlanır. return ifadesinden sonraki satırlar çalıştırılmaz.

Örneğin:

function test() {
    const a = 10;
    const b = 15;
    const c = 35;
    return a + b;
    return a + b + c;
}
// Çıktı: 25
function test() {
    const a = 10;
    const b = 15;
    const c = 35;
    if(a+b >= 30) { return a + b; } // Koşul sağlanmadığı için if bloğu çalışmadı ve bu return işletilmedi.
    return a + b + c;
}
// Çıktı: 70
function test() {
    let a = 0;
    for(let i=0; i < 30; i++) {
        if(a > 10) return a; // a değeri 11'e ulaştığı zaman if koşulu sağlanacağı için return işletilir ve fonksiyon sonlanır. Haliyle for döngüsü de bu noktadan sonra çalışmaz.
        a++;
    }
    return a;
}
// Çıktı: 11

Aşağıdaki örnekte myButton id'li bir butona click olayını işliyoruz.
Butona tıklandığında butonda wait adında bir class var mı diye kontrol ediyoruz. Varsa hiçbir işlem yapılmaması için return ifadesi koyuyoruz.
Sonraki satır işletiliyorsa wait adında bir class yok demektir. Bu class'ı butona ekliyoruz.
setTimeout yardımıyla 5 saniye sonra wait class'ını butondan siliyoruz.
Haliyle butona ilk tıkladığımızda konsola "BUTON ÇALIŞTI" yazacak. Sonra 5 saniye boyunca butona ne kadar tıklarsak tıklayalım "BUTON ŞU AN MEŞGUL" yazacak ve return sayesinde bundan sonraki satırlar işletilmeyecek.
Bu şekilde mesela bir ajax isteği yapıyorsanız, ajax isteği sonlanıncaya kadar butona tekrar tekrar basıldığında tekrar tekrar ajax isteği atılmasını önleyebilirsiniz.

$("#myButton").on("click", function() {
    const $thisButton = $(this);
    if($thisButton.hasClass("wait")) { 
        console.log("BUTON ŞU AN MEŞGUL"); 
        return; 
    }
    $thisButton.addClass("wait");
    console.log("BUTON ÇALIŞTI");
    setTimeout(function() { $thisButton.removeClass("wait"); }, 5000);
});