Etkili Olay Yönetimi ve Hız Sınırlama
Yeniden boyutlandırma veya kaydırma gibi sık tetiklenen olaylar için olay hız sınırlama ve geciktirme uygulayarak aşırı işlev çağrılarını önleyin ve duyarlılığı artırın.
Etkili Olay Yönetimi ve Hız Sınırlama, CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 3 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, jQuery Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. jQuery Academy kursu toplamda 3 dersten oluşur.
Olay Aşırı Yükü: Performans Sorunu
Etkileşimli web uygulamaları geliştirirken kaydırma, yeniden boyutlandırma veya yazma gibi olaylara sıkça güveniriz. Bu olaylar, kullanıcı arayüzünü güncelleyen veya hesaplamalar yapan işlevleri tetikler.
Ancak bu olaylar çok sık tetiklenirse performans darboğazlarına, yavaş bir kullanıcı deneyimine ve hatta tarayıcı çökmelerine yol açabilir. Optimizasyon teknikleri bu noktada büyük önem kazanır.
Sorun: Olayların Hızla Tetiklenmesi
Herhangi bir optimizasyon uygulanmadığında scroll gibi tipik bir olayın ne sıklıkta tetiklenebileceğine bakalım. Siz kaydırma yaparken konsolu açın veya sayacı gözlemleyin.
Sayının ne kadar hızlı arttığına dikkat edin; bu, kısa bir süre içinde çok sayıda işlev çağrısı yapıldığını gösterir. Bu oldukça verimsiz olabilir.
<!DOCTYPE html>
<html>
<head>
<title>Rapid Event Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
body { height: 200vh; font-family: sans-serif; margin: 0; }
#status { position: fixed; top: 10px; left: 10px; background: #ffe0b2; padding: 8px; border-radius: 4px; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
p { margin-top: 50px; padding: 10px; }
</style>
</head>
<body>
<div id="status">Scroll Count: 0</div>
<p>Scroll down to see the event fire rapidly.</p>
<script>
$(document).ready(function() {
let count = 0;
$(window).on('scroll', function() {
count++;
$('#status').text('Scroll Count: ' + count);
});
});
</script>
</body>
</html>Throttling Kavramına Giriş
Throttling, bir işlevin belirli bir zaman aralığında ne sıklıkta çağrılabileceğini sınırlayan bir tekniktir. Bir işlevin, verilen zaman aralığında en fazla bir kez çalıştırılmasını sağlar.
Bunu yalnızca her 200 milisaniyede bir açılan bir kapı gibi düşünebilirsiniz. Kaç kez geçmeye çalışırsanız çalışın, yalnızca kapı açıkken geçebilirsiniz.
Throttling Uygulamada
Burada basit bir throttling yardımcı işlevi yer alıyor. Bu işlev, kaydırma işleyicimizin 200 milisaniyede en fazla bir kez çalışmasını sağlar. Böylece sürekli kaydırma sırasında yapılan çağrıların sayısı önemli ölçüde azalır.
Bunu önceki örnekle karşılaştırın. Sayaç daha akıcı ancak daha seyrek güncellenir ve kaynak tasarrufu sağlanır.
<!DOCTYPE html>
<html>
<head>
<title>Throttling Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
body { height: 200vh; font-family: sans-serif; margin: 0; }
#status { position: fixed; top: 10px; left: 10px; background: #c8e6c9; padding: 8px; border-radius: 4px; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
p { margin-top: 50px; padding: 10px; }
</style>
</head>
<body>
<div id="status">Throttled Scroll Count: 0</div>
<p>Scroll down. The count updates less frequently.</p>
<script>
// A simple throttling utility function
function throttle(func, delay) {
let canRun = true;
return function(...args) {
if (canRun) {
func.apply(this, args);
canRun = false;
setTimeout(() => canRun = true, delay);
}
};
}
$(document).ready(function() {
let count = 0;
const throttledScroll = throttle(function() {
count++;
$('#status').text('Throttled Scroll Count: ' + count);
}, 200); // Update at most every 200ms
$(window).on('scroll', throttledScroll);
});
</script>
</body>
</html>Debouncing Kavramına Giriş
Debouncing, olayın son tetiklenmesinden bu yana belirli bir süre geçene kadar bir işlevin çalıştırılmasını erteleyen başka bir tekniktir.
Hareket etmeyi bıraktıktan ancak 1 saniye sonra sönen bir ışık düşünün. Hareket etmeye devam ederseniz zamanlayıcı sıfırlanır. İşlev, kullanıcı eylemini belirtilen gecikme süresi boyunca durdurduğunda yalnızca bir kez çalışır.
Debouncing Uygulamada
Burada bir metin girişinin keyup olayına debouncing uyguluyoruz. Durum, siz yazmayı bıraktıktan 500 milisaniye sonra güncellenir.
Bu yaklaşım, kullanıcının arama terimini yazmayı bitirmesinden sonra yalnızca bir kez arama sorgusu çalıştırmak istediğiniz arama kutuları için idealdir.
<!DOCTYPE html>
<html>
<head>
<title>Debouncing Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
body { font-family: sans-serif; margin: 0; padding: 20px; }
input { padding: 8px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; width: 100%; max-width: 300px; }
#status { background: #bbdefb; padding: 8px; margin-top: 15px; border-radius: 4px; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
</style>
</head>
<body>
<p>Type into the box. The status updates only after you pause.</p>
<input type="text" id="myInput" placeholder="Start typing...">
<div id="status">Last typed: (none)</div>
<script>
// A simple debouncing utility function
function debounce(func, delay) {
let timeoutId;
return function(...args) {
const context = this;
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(context, args);
}, delay);
};
}
$(document).ready(function() {
const debouncedLog = debounce(function(event) {
$('#status').text('Last typed: ' + $(event.target).val());
}, 500); // Wait 500ms after typing stops
$('#myInput').on('keyup', debouncedLog);
});
</script>
</body>
</html>Throttling ve Debouncing: Temel Farklar
Her ikisi de olay işleme süreçlerini optimize etse de farklı amaçlara hizmet eder:
- Throttling: Olay hızla tetiklense bile bir işlevin zaman içinde düzenli olarak çalıştırılmasını garanti eder. Burada amaç hızı kontrol etmektir.
- Debouncing: Bir işlevin yalnızca bir süre boyunca hiçbir etkinlik gerçekleşmedikten sonra çalıştırılmasını sağlar. Burada amaç, kullanıcının bir eylemi tamamlamasını beklemektir.
Doğru tekniği seçmek, özel kullanım senaryonuza bağlıdır.
Pratik Kullanım Senaryoları
Her biri için yaygın senaryolar şunlardır:
- Throttling:
- Pencerenin yeniden boyutlandırılması
- Sayfanın kaydırılması
- Sürükleyip bırakma hareketleri
- Oyun güncellemeleri (ör. silah ateşleme) - Debouncing:
- Arama çubuğuna veri girişi (otomatik tamamlama)
- Kullanıcı verisi girdikten sonra form doğrulama
- Metin düzenleyicide içeriği kaydetme
- Kullanıcı yazmayı bıraktıktan sonra bir API çağrısı tetikleme
jQuery Olaylarıyla Entegrasyon
Bu yardımcı işlevleri .on() veya .bind() gibi jQuery olay yöntemleriyle kolayca entegre edebilirsiniz. Throttling veya debouncing uygulanmış işlevinizi olay işleyicisi olarak vermeniz yeterlidir.
$(window).on('resize', throttle(myResizeHandler, 250));
$('#search-input').on('keyup', debounce(searchFunction, 300));Bu sayede olay dinleyicileriniz verimli, uygulamanız da duyarlı kalır.
Performans Kazanımları
Throttling ve debouncing uygulayarak çeşitli performans kazanımları elde edersiniz:
- Azaltılmış CPU Kullanımı: Daha az işlev çağrısı, tarayıcının daha az iş yapması anlamına gelir.
- Daha Akıcı Kullanıcı Arayüzü: Takılan animasyonları veya yanıt vermeyen arayüzleri önler.
- Daha İyi Kullanıcı Deneyimi: Kullanıcılar uygulamayı daha hızlı ve akıcı algılar.
- Optimize Edilmiş API Çağrıları: Arka ucun gereksiz isteklerle doldurulmasını önler.
Olay Optimizasyonunu Hızlıca Sınayın
Aşağıdaki senaryolardan hangisi debouncing kullanılarak en iyi şekilde ele alınır?
Özet ve Sonraki Adımlar
Harika iş çıkardınız! Olay işlemeyi optimize etmek için iki güçlü teknik öğrendiniz:
- Throttling: Bir işlevin çağrılabileceği hızı sınırlar.
- Debouncing: Bir süre boyunca hiçbir etkinlik gerçekleşmeyene kadar işlevin çalıştırılmasını erteler.
Bu tekniklerde ustalaşmanız, jQuery uygulamalarınızın performansını ve yanıt verebilirliğini önemli ölçüde artırır. Özel ihtiyaçlarınıza en uygun noktayı bulmak için farklı gecikme süreleriyle denemeler yapın!
Sıkça Sorulan Sorular
“Etkili Olay Yönetimi ve Hız Sınırlama” dersi ücretsiz mi?
Evet — “Etkili Olay Yönetimi ve Hız Sınırlama” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve jQuery Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. jQuery Academy kursu toplamda 3 dersten oluşur.
“Etkili Olay Yönetimi ve Hız Sınırlama” dersinde ne öğreneceğim?
Yeniden boyutlandırma veya kaydırma gibi sık tetiklenen olaylar için olay hız sınırlama ve geciktirme uygulayarak aşırı işlev çağrılarını önleyin ve duyarlılığı artırın. jQuery Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
jQuery Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te jQuery Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 2. dersidir.
“Etkili Olay Yönetimi ve Hız Sınırlama” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu jQuery Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her jQuery Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- DOM Değiştirme İşlemlerini İyileştirme
- Etkili Olay Yönetimi ve Hız Sınırlama
- Önbelleğe Alma ve Ertelenmiş Nesnelerden Yararlanma