Okuduğum kadarıyla call stack içinde fonksiyonlarımızın barındığı bir bölüm ve biz bir fonksiyonu çağırdıkça bunlar üst üste konuluyor ve işi bitince yani çalışması tamamlanınca üstten çıkarılıyor. Bilmem gerek ya da yanlış anladığım bir şey var mı? Ayrıca call stack ve Event loops ile ilgili makale tavsiyesi olan da atarsa sevinirim.
JavaScript Call stack nasıl çalışır?
- Konuyu başlatan 533388
- Başlangıç Tarihi
- Mesaj 4
- Görüntüleme 381
Daha fazla
- Cinsiyet
- Erkek
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;
Örnek bir Listener projesi;
JavaScript:
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();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?
Bir de şöyle bir örnek yaptım kendimce daha iyi anladım.
JavaScript:
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();
Son düzenleme:
Daha fazla
- Cinsiyet
- Erkek
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 queue daki verilerde çalışmaya başlamış olmasıdır. Yani fonksiyonun sonuna kadar çalışması beklenmez. Bunu şu örneği çalıştırarak anlayabilirsin.
JavaScript:
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"))
}Teşekkür ederim.
Bu arada async fonksiyonlar Event Queue'da işlenmesi için beklendiği için mi sonra geliyor çıktısı?
Son düzenleme:
Benzer konular
Technopat Haberler
Yeni konular
-
-
-
-
-
-
-
-
-
-
-
Laptop için 6.000 TL'ye kadar monitör önerisi- Tranquilo
- Mesaj: 6
-
-
