setTimeout vs. setInterval (JavaScript)Beğen

Web uygulamalarında istemci tarafında sıkça kullanılan işlemlerden biri ardışık fonksiyon çağırma işlemidir. İstemci tarafında bir alanı sürekli güncellemek, dinlemek veya sunucu tarafına periyodik olarak istek gönderip cevap almak vb. gibi işlemler örnek teşkil edebilir. Bu özelliği sağlamak için ise JavaScript tarafında 2 fonksiyon mevcuttur.

• setInterval:

setInterval(function, milliseconds) şeklinde bir imzası vardır. Aşağıdaki gibi fonksiyonu inline tanımlayarak örnekledim.

    var setIntervalId = setInterval(function sampleFunc() {
        var r = confirm('Save?');
        if (r) {
           $("form").submit();        
        }    
    }, 30 * 1000);

Yukarıdaki örnek, 30 saniyede bir kullanıcıdan onay alarak formu sunucuya iletmektedir. İçerisindeki fonksiyonun tamamlanmasını beklemeden 30 saniyede bir sürekli bu işlemi tetikleyecektir. setInterval fonksiyonu bir id dönmektedir. bu id değerini kullanarak scriptinizin başka bir bölmesinde clearInterval(id) fonksiyonunu çağırarak bu tekrarlama işlemini sonlandırabilirsiniz. Yukarıdaki örnek için clearInterval(setIntervalId) şeklinde bir çağırım yaptığımız anda tekrarlama işlemi son bulacaktır.  

• setTimeout:

setTimeout(function, milliseconds) şeklinde bir imzası vardır. parametre olarak geçtiğimiz fonksiyonu (inline veya önceden tanımlı) belirli süre sonrasında sadece 1 kere çalıştıracaktır. Aşağıda örnekledim. 

    setTimeout(function submitForm() {
        var r = confirm('Save?');
        if (r) {
            $("form").submit();
        }

        //setTimeout(submitForm, timeout);
    }, 30 * 1000);

Yukarıdaki haliyle fonksiyon 30 saniye sonra kullanıcıdan onay alarak formu sunucuya iletme işlemini tetikleyecektir. Bu fonksiyonu tekrarlı çağırım amacı ile kullanmak istiyorsak yukarıda // ile yorumlama (comment) yaptığım satırı açarsak (yani // kaldırırsak) bu fonksiyon da recursive kendini çağıracağı için yaklaşık 30snde bir tekrarlanacaktır. Yaklaşık diyorum çünkü "betiğin çalışma süresi+30sn" sonra tekrarlanacaktır. clearTimeout(id) şeklinde kullanım bu fonksiyon için de aynı şekilde geçerlidir. Tetikleme yapılmadan önce iptal edilebilir. Bu kullanımda kullanıcı onay vermediği ve betik tamamlanmadığı sürece fonksiyon tekrarlanmayacaktır.

Ben özellikle jQuery.get, post, ajax gibi sunucuyla tekrarlı iletişime geçmek istediğim durumlarda veya kullanıcıya uyarı verme, onay alma gibi durumlarda setTimeout fonksiyonunu recursive kullanmayı tercih ediyorum. Bu şekilde fonksiyon tamamlanmadan yeniden tetiklenmesi de engellenmiş oluyor. Yığılmanın önüne geçebiliyorum. Ancak eğer fonksiyonun tamamlanması değil de, belirtilen süre sonunda mutlaka tetiklenmesi önemli ise (örneğin istemci tarafında gerçek zamanlı çalışan bir görsel saat uygulaması olabilir) setInterval kullanılmalıdır.