JQuery – holdReady() Fonksiyonu
Önceki yazılarımdan JQuery – Ready() Fonksiyonu başlıklı yazımda Ready fonksiyonuna değinmiştik.Hatırlarsanız eğer Ready fonksiyonu sayfa yani document yüklenir yüklenmez devreye giren bir fonksiyondu.Hatta bu fonksiyonu Asp.NET’te ki Page_Load metoduna benzetmiştik.holdReady fonksiyonu ile Ready fonksiyonunu tutabiliyoruz ya da devam etmesini sağlayabiliyoruz.Daha anlaşılır şekilde Ready fonksiyonunun işleyişini durdurup başlatabiliyoruz.Şimdi gelin holdReady fonksiyonunu detaylıca inceleyelim.
Neden holdReady() fonksiyonunu kullanma ihtiyacı hissederiz?
Document yüklenir yüklenmez Ready fonksiyonu devreye girecektir, lakin yüklenmesi bitmeden bazen harici JavaScript dosyaları ya da belli başlı modül, eklenti dosyaları projeye entegre edilmesi gerekebilir.Böyle durumlarda Ready fonksiyonu çalışırken araya girip bu dosyaları yükletebilir ardından işleyişi devam ettirebiliriz.
Aşağıda bu konuyla alakalı örneklendirme göreceksiniz.”index.html” dosyası içeriğinde çalıştırılan JQuery kodlarına “js/harici.js” dosyasını holdReady fonksiyonu sayesinde Ready fonksiyonu durdurularak entegre edilecek ardından işlem devam edecektir.
--- index.html ---
<html>
<head>
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$("document").ready(function()
{
alert("ready fonksiyonu 1. adımda.");
});
$.holdReady(true);
//Ready fonksiyonunu durdur.
$.getScript("js/harici.js",function()//harici.js dosyasını yükle.
{
/*Burada harici.js dosyası doğru bir şekilde yüklenirse eğer
öncelikle harici.js içindeki komutlar sonuçlanacak ardından
ready fonksiyonları sonuçlanacaktır.*/
$.holdReady(false);
//Ready fonksiyonunu kaldığı yerden devam ettir.
});
$("document").ready(
function()
{
alert("ready fonksiyonu 2. adımda.");
});
</script>
</body>
</html>
Yukarıdaki kodu izah etmek için öncelikle “harici.js” dosyasının içeriğinide paylaşalım.
--- harici.js ---
alert("harici.js dosyası sayfaya entegre edildi.");
Her programlama dilinde olduğu gibi JQuery’de de yukarıdan aşağı doğru bir derleme gerçekleştirilmektedir.Sayfa yüklenirken öncelikle ready fonksiyonu çalışacak ve “ready fonksiyonu 1. adımda.” mesajını gönderecektir.Ama burada dikkat etmemiz gereken husus bu mesaj görülmeyecektir.Çünkü holdReady fonksiyonu ile ready fonksiyonu durdurulacak ve getScript ile “harici.js” dosyası sayfaya entegre edilecektir.Ardından holdReady fonksiyonu ile ready fonksiyonu kaldığı yerden devam ettirilip “ready fonksiyonu 2. adımda.” mesajı gönderilecektir.Sonuç olarak öncelikle “harici.js” içerisindeki “harici.js dosyası sayfaya entegre edildi.” mesajı görüntülenecek, ardından ready fonksiyonları içindeki mesajlar sırasıyla gelecektir.Bunun sebebi ready fonksiyonları sayfa yüklenir yüklenmez sonuç vereceğinden dolayı, araya girildiğinde sayfa yüklenmemiş olacak o yüzden gönderilen mesajlar sırayla çıkmayacaktır.getScript fonksiyonu ile entegre edilen dosya içeriğide öncelikli okunacağı için önce sonuç verecektir.
Pratik ve güzel bir fonksiyon olduğuna şüphe yok gibi 🙂
Sonraki yazılarımda görüşmek dileğiyle…
İyi çalışmalar…
Teşekkürler