Görselleştirilmiş JavaScript: Event Loop-1

Bu makale, Lydia Hallie tarafından yazılan JavaScript Visualized: Event Loop makalesinin Türkçe çevirisidir.

Photo by Joseph Pearson on Unsplash

Bu, her JavaScript geliştiricisinin bir şekilde uğraşması gereken şeylerden biridir, ancak ilk başta anlamak biraz kafa karıştırıcı olabilir. Ben görsel öğrenen biriyim, bu yüzden size düşük çözünürlüklü giflerle görsel bir şekilde anlatarak yardımcı olmayı düşündüm çünkü 2019'dayız ve gifler bir şekilde hala pikselli ve bulanık.

Ama önce, event loop nedir ve neden ilgilenmelisiniz?

JavaScript tek iş parçacıklıdır single threaded: aynı anda yalnızca bir görev çalışabilir. Genellikle bu önemli bir şey değildir, ancak şimdi 30 saniye süren bir görevi yürüttüğünüzü hayal edin. yani tüm kullanıcı arayüzü takılı kaldı. 😬 Yıl 2019, kimse yavaş, yanıt vermeyen bir web sitesi istemez.

Neyse ki, tarayıcı bize JavaScript motorunun kendisinin sağlamadığı bazı özellikler sağlıyor: bir Web API. Buna DOM API, setTimeout, HTTP istekleri vb. dahildir. Bu, bazı asenkron işlemleri engellemeyen davranışlar oluşturmamıza yardımcı olabilir. 🚀

Bir fonksiyon çağırdığımızda, call stack adı verilen bir şeye eklenir. Call stack JavaScript motorunun bir parçasıdır, bu tarayıcıya özel değildir. Bu bir yığındır, yani ilk giren son çıkar. (Bir yığın krep düşünün). Bir fonksiyon bir değer döndürdüğünde yığından atılır.

Respond fonksiyonu, bir setTimeout fonksiyonu döndürür. setTimeout bize Web API tarafından sağlanır: Ana akışı engellemeden görevleri geciktirmemize izin verir. setTimeout fonksiyonuna geçtiğimiz callback fonksiyonu (arrow fonksiyon) Web API’ye eklenir. Bu arada, setTimeout fonksiyonu ve respond fonksiyonu stack’ten atılır, ikisi de değerlerini geri döndürür.

Web API’sinde bir zamanlayıcı, kendisine ilettiğimiz ikinci argüman olan 1000ms kadar çalışır. Callback fonksiyonu, call stack’e hemen eklenmez, bunun yerine kuyruk queue adı verilen bir şeye iletilir.

Bu kafa karıştırıcı kısım olabilir: Bu, callback fonksiyonunun 1000ms sonra call stack’e ekleneceği anlamına gelmez! 1000ms sonra kuyruğa eklenir. Ama bu bir kuyruk, fonksiyonun sırasını beklemesi gerekiyor!

Şimdi hepimizin beklediği kısım geldi… Olay döngüsünün tek görevini yerine getirme zamanı: kuyruğu call stack’e bağlamak! Call stack boşsa, yani daha önce çağrılan tüm fonksiyonlar değerlerini döndürdüyse ve stack’ten atıldıysa, sıradaki ilk öğe call stack’e eklenir. Bu durumda, başka hiçbir fonksiyon çağrılmadı, yani callback fonksiyonu kuyruktaki ilk öğe olduğunda call stack boştu.

Callback fonksiyonu call stack’e eklenir, çağrılır ve bir değer döndürür ve son olarak stack’ten atılır.

Bir makaleyi okumak eğlencelidir, ancak bununla yalnızca gerçekten tekrar tekrar çalışarak tamamen rahatlayabilirsiniz. Aşağıdakileri çalıştırırsak ekrana nelerin yazılacağını anlamaya çalışın.

const foo = () => console.log("First")
const bar = () => setTimeout(() => console.log("Second"), 500)
const baz = () => console.log("Third")

bar()
foo()
baz()

Anladın mı? Bu kodu bir tarayıcıda çalıştırdığımızda neler olduğuna hızlıca bir göz atalım.

• bar fonksiyonunu çağırıyoruz. bar fonksiyonu geriye setTimeout fonksiyonu döndürür.
• setTimeout’a ilettiğimiz callback fonksiyonu, Web API’sine eklenir, setTimeout fonksiyonu ve bar fonksiyonu stack’ten atılır.
• Zamanlayıcı çalışır, bu arada foo fonksiyonu çağrılır ve ekrana First yazılır. foo fonksiyonu geriye undefined döner (çünkü bir şeyi return etmedik), baz fonksiyonu çağrılır ve callback kuyruğa eklenir.
• baz fonksiyonu tarafından ekrana Third yazdırılır. Event loop, baz fonksiyonundan sonra call stack’in boş olduğunu görür ve bundan sonra callback fonksiyonu call stack’e eklenir.
• Callback fonksiyonu ekrana Second yazdırır.

Umarım bu, etkinlik döngüsünde biraz daha rahat hissetmeni sağlar! Hâlâ kafa karıştırıcı görünüyorsa endişelenmeyin, en önemli şey, Google’da doğru terimleri verimli bir şekilde aramak ve sonunda doğru StackOverflow sayfasına ulaşmak için belirli hataların/davranışların nereden gelebileceğini anlamaktır. 💪🏼

Teo

Görselleştirilmiş JavaScript: Okuma Listesi

View list

5 stories

Bu makale size yardımcı olduysa, lütfen bana desteğinizi göstermek için abone olun ve aşağıdaki alkış 👏 düğmesine birkaç kez tıklayın. 👇

Want to Connect?

Twitter — GitHub