JavaScript Call stack nasıl çalışır?

RaSGooL dedi:

Makaleye gerek yok. Basit bir event listener projesi yap. Mantığını az çok anlarsın zaten. Event listener kısmında async işlemlerde yaparsan loop mantığınıda çözersin.

Örnek bir Listener projesi;

JavaScript:Panoya kopyala

class Listener {
    // Burayı yaz kafana göre.
}

class BlaBla extends Listener {
    constructor(){
        super(); // listeners init
    }

    run() {
        this.fire("onBefore");
        console.log("Hey i am running");
        this.finishUp()
        console.log("End of running")
        this.fire("onAfter");
    }
  
    finishUp() {
        console.log("I am done");
        this.fire("onFinish");
    }
}

const bla = new BlaBla();
bla.addEventListener("onBefore", () => console.log("I am run first"))
var onBefore2Id = bla.addEventListener("onBefore", () => console.log("You shouldnt this."))
bla.removeEventListener(onBefore2Id);
bla.addEventListener("onAfter", () => console.log("Everything is ok!"))
bla.addEventListener("onAfter", () => console.log("Show me as last one"))
bla.addEventListener("onFinish", () => console.log("Show me after finish up"))

bla.run();

Genişletmek için tıkla...

function func1() {
    console.log("Func1 başlıyor");
    func3();
    console.log("Func1 bitiyor");
  }
 
  function func3() {
    setTimeout(() => {
        console.log("Func3 başlıyor");
    },0);
    console.log("Func3 bitiyor");
  }
 
func1();

533388 dedi:

Hocam teorik olarak memory heap , call stack , web api kısımlarını çok iyi anladım.Az önce yeni bir şey daha öğrendim ama kafama çok yatmadı.Bazen call stack kısmı çok doluyormuş ve bu durum kullanıcı performansı açısından sıkınıtlıymış.Biz de bu durumun önüne geçerek async işlemler ile bu stack kısmının dolmasını engelliyormuşuz ama kullandığımız timeout fonksiyonları içindekiler web içindeki heapta tutuluyormuş , bu doğru mu yani async işlemler yapınca biz web'in içindeki heapı mı kullanıyoruz?

Ve galiba en son call stack içindeki işlemler bitince mi bu web apilerin içindekiler çalışıyor?

Genişletmek için tıkla...

const sleep = async (t) => new Promise(r => setTimeout(r, t));
const l = console.log;
const run = async() => {
    l("Run 1");
    sleep(0).then(_=>l("Sleep 0"))
    l("Run 2");
    await sleep(100).then(_=>l("Await Sleep 100"))
    l("Run 3");
    sleep(900).then(_=>l("Sleep 900"))
    sleep(1200).then(_=>l("Sleep 1200"))
    l("Run 4");
    await sleep(1000).then(_=>l("Await Sleep 1000"))
    l("Run 4");
    sleep(0).then(_=>l("Sleep 0 2"))
    l("Run 5");
    sleep(200).then(_=>l("Sleep 200"))
}

RaSGooL dedi:

Hayır fonksiyon işleme alındığında işlemler yukarıdan aşağı olacak şekilde stacklenir. Çalışmaya başlanır. Asenkron işlemler asıl işlevi durdurmaması için Event queue da çalışması sağlanır. Fakat burada asıl olay fonksiyon hala çalışmaya devam ederken queuedaki verilerde çalışmaya başlamış olmasıdır. Yani fonksiyonun sonuna kadar çalışması beklenmez. Bunu şu örneği çalıştırarak anlayabilirsin.

JavaScript:Panoya kopyala

const sleep = async (t) => new Promise(r => setTimeout(r, t));
const l = console.log;
const run = async() => {
 l("Run 1");
 sleep(0).then(_=>l("Sleep 0"))
 l("Run 2");
 await sleep(100).then(_=>l("Await Sleep 100"))
 l("Run 3");
 sleep(900).then(_=>l("Sleep 900"))
 sleep(1200).then(_=>l("Sleep 1200"))
 l("Run 4");
 await sleep(1000).then(_=>l("Await Sleep 1000"))
 l("Run 4");
 sleep(0).then(_=>l("Sleep 0 2"))
 l("Run 5");
 sleep(200).then(_=>l("Sleep 200"))
}

Ayrıca konu içinde teşekkürler. Bilgilerimi tazelemiş oldun.

Genişletmek için tıkla...