Debounce ve Throttle — Elle Yazım
Küçük debounce ve throttle yardımcıları oluşturun. Sonda ve başta çalışan çeşitleri deneyin ve her birini ne zaman seçeceğinizi öğrenin.
Debounce ve Throttle — Elle Yazım, CoddyKit'te ücretsiz bir JavaScript 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, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 3 dersten oluşur.
Genel bakış
Amaç: Gürültülü olayları denetlemek.
- Beklemeli birleştirme: Sakinliği bekleyin, ardından bir kez çalıştırın
- Hız sınırlama: Her aralıkta en fazla bir kez çalıştırın
- Başta ve sonda çalışan çağrılar
- Küçük ve okunabilir yardımcılar
Beklemeli birleştirme (sondan çalışan)
Sondan çalışan beklemeli birleştirme, her olayda bir zamanlayıcıyı sıfırlar ve ortam sakinleştiğinde bir kez çalışır.
// Debounce (trailing): run once after events stop
function debounce(fn, wait) {
let t = null;
return function (...args) {
clearTimeout(t);
t = setTimeout(function () {
fn.apply(null, args);
}, wait);
};
}
// Simulate rapid events: only the last triggers the call
const debouncedLog = debounce(function (msg) {
console.log("debounced:", msg);
}, 10);
for (let i = 0; i < 5; i++) {
setTimeout(function () {
debouncedLog("final after bursts");
}, i * 3);
}
Beklemeli birleştirme (baştan çalışan)
Baştan çalışan beklemeli birleştirme hemen çalışır, ardından sessizlik aralığı sona erene kadar tekrarları engeller.
// Debounce (leading): first call fires immediately, then ignore until quiet
function debounceLeading(fn, wait) {
let t = null;
return function (...args) {
if (t === null) {
fn.apply(null, args);
}
clearTimeout(t);
t = setTimeout(function () {
t = null;
}, wait);
};
}
// Demo: first call prints quickly; later bursts are ignored until quiet
const firstTap = debounceLeading(function (x) {
console.log("leading:", x);
}, 12);
for (let i = 0; i < 4; i++) {
setTimeout(function () {
firstTap("first-then-wait");
}, i * 3);
}
Hız sınırlama (baştan çalışan)
Hız sınırlama, çağrıları zaman aralığı başına bir çağrıyla sınırlar ve fazlalıkları atar.
// Throttle (leading): at most once per interval
function throttle(fn, wait) {
let last = 0;
return function (...args) {
const now = Date.now();
if (now - last >= wait) {
last = now;
fn.apply(null, args);
}
};
}
// Demo: many events, but prints at most once every 10ms
const throttled = throttle(function (n) {
console.log("throttled:", n);
}, 10);
for (let i = 0; i < 10; i++) {
setTimeout(function () {
throttled(i);
}, i * 2);
}
Hız sınırlama (sondan çalışan)
Sondan çalışan hız sınırlama, aralığın sonunda en güncel değeri yine almanızı sağlar.
// Throttle (trailing): schedule the last call within the window
function throttleTrailing(fn, wait) {
let last = 0;
let timer = null;
let queuedArgs = null;
function invoke(args) {
last = Date.now();
fn.apply(null, args);
}
return function (...args) {
const now = Date.now();
const remaining = wait - (now - last);
if (remaining <= 0) {
// Window passed: run now
clearTimeout(timer);
timer = null;
queuedArgs = null;
invoke(args);
} else {
// Queue the latest args to run at the end of the window
queuedArgs = args;
clearTimeout(timer);
timer = setTimeout(function () {
timer = null;
if (queuedArgs) {
invoke(queuedArgs);
queuedArgs = null;
}
}, remaining);
}
};
}
// Demo: last value in a burst is printed after the window
const trail = throttleTrailing(function (x) {
console.log("trail:", x);
}, 10);
for (let i = 0; i < 6; i++) {
setTimeout(function () {
trail("v" + i);
}, i * 3);
}
Hangisini ne zaman kullanmalısınız?
Seçim:
- Beklemeli birleştirme: Yazarken arama, yeniden boyutlandırma — kullanıcı durduktan sonra çalıştırın.
- Hız sınırlama: Kaydırma/sürükleme — çağrıları düzenli bir tempoyla sınırlayın.
- Anında geri bildirim için baştan çalışanı; son değeri almak için sondan çalışanı kullanın.
Beklemeli birleştirme ve hız sınırlama testi
Hızlı kontrol: Her aralıktaki çağrıları sınırlama.
Özet
Özet: Sondan ve baştan çalışan beklemeli birleştirme, basit bir baştan çalışan hız sınırlama ve hafif bir sondan çalışan hız sınırlama yazdınız. “Kullanıcı durduktan sonra” için beklemeli birleştirmeyi, “düzenli tempo” için hız sınırlamayı seçin.
Sıkça Sorulan Sorular
“Debounce ve Throttle — Elle Yazım” dersi ücretsiz mi?
Evet — “Debounce ve Throttle — Elle Yazım” 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 JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 3 dersten oluşur.
“Debounce ve Throttle — Elle Yazım” dersinde ne öğreneceğim?
Küçük debounce ve throttle yardımcıları oluşturun. Sonda ve başta çalışan çeşitleri deneyin ve her birini ne zaman seçeceğinizi öğrenin. JavaScript 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.
JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te JavaScript 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.
“Debounce ve Throttle — Elle Yazım” 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 JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her JavaScript 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
- setTimeout, setInterval ve zamanlayıcı kayması
- Debounce ve Throttle — Elle Yazım
- Animasyon Zamanlaması — Zamana Dayalı Döngülere Giriş