JavaScript Academy · Ders

setTimeout, setInterval ve zamanlayıcı kayması

Tek seferlik ve yinelenen görevleri setTimeout/setInterval ile zamanlayın ve zamanlayıcı kaymasını azaltan basit bir teknik öğrenin.

1. ders / 38 adım

setTimeout, setInterval ve zamanlayıcı kayması, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 3 dersinin 1. 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.

Zamanlayıcılara giriş

Amaç: Çalışmaları düzenli biçimde zamanlamak.

  • setTimeout: Daha sonra bir kez çalıştırır
  • setInterval: Tekrar tekrar çalıştırır
  • Drift: Zamanlayıcıların neden kaydığı
  • Basit bir drift düzeltmesi
setTimeout, setInterval ve zamanlayıcı kayması — resim 1

setTimeout — tek seferlik

setTimeout(fn, ms), gecikmeden sonra bir kez çalışır (minimum zamanlama sağlar, kesin zamanlama sağlamaz).

// setTimeout schedules a one-off callback
console.log("A: start");

setTimeout(function () {
  console.log("B: after ~5ms");
}, 5);

console.log("C: scheduled");
setTimeout, setInterval ve zamanlayıcı kayması — resim 2

setInterval — tekrarlı

setInterval otomatik olarak tekrarlanır; durdurmak için clearInterval(id) kullanın.

// setInterval repeats; always clear it
let count = 0;

const id = setInterval(function () {
  count = count + 1;
  console.log("tick", count);

  // Stop after 3 ticks to avoid endless logs
  if (count >= 3) {
    clearInterval(id);
    console.log("stopped");
  }
}, 5);
setTimeout, setInterval ve zamanlayıcı kayması — resim 3

Drift oluşumunu görün

Gerçek aralıklar değişir; işlemler, cihaz yükü ve olay döngüsü drift oluşmasına neden olur.

// Drift demo: expected vs actual timing
const targetMs = 5;
let last = Date.now();
let times = 0;

const driftId = setInterval(function () {
  const now = Date.now();
  const gap = now - last; // actual gap
  last = now;
  times = times + 1;
  console.log("gap~", gap, "ms");

  if (times >= 3) {
    clearInterval(driftId);
    console.log("done");
  }
}, targetMs);
setTimeout, setInterval ve zamanlayıcı kayması — resim 4

Hizalanmış zamanlama

Hareket eden bir expected zamana hizalanın: Biriken hatayı önlemek için sonraki gecikmeyi bu zamana göre hesaplayın.

// Simple drift fix: schedule from the expected time
const step = 5;
let expected = Date.now() + step;
let ticks = 0;

function tick() {
  ticks = ticks + 1;
  const now = Date.now();
  const drift = now - expected; // positive if we are late
  console.log("drift:", drift, "ms");

  // Compute next expected time first
  expected = expected + step;

  // Next delay = time until the next expected timestamp
  const nextDelay = Math.max(0, expected - Date.now());

  if (ticks < 3) {
    setTimeout(tick, nextDelay);
  } else {
    console.log("aligned stop");
  }
}

setTimeout(tick, step);
setTimeout, setInterval ve zamanlayıcı kayması — resim 5

İpuçları ve kontrol listesi

İpuçları:

  • İşiniz bittiğinde her zaman clearInterval çağrısını temizleyin.
  • Düzenli bir ritim için hizalanmış setTimeout döngülerini tercih edin.
  • Drift'i azaltmak için zamanlayıcı geri çağrılarını kısa tutun.
setTimeout, setInterval ve zamanlayıcı kayması — resim 6

Drift düzeltme testi

Hızlı kontrol: Drift azaltma.

setTimeout, setInterval ve zamanlayıcı kayması — resim 7

Özet

Özet: Tek seferlik işler için setTimeout, tekrarlar için setInterval kullanın (temizlemeyi unutmayın); sonraki çalışmaları expected zamanlara hizalayarak drift oluşumunu azaltın.

setTimeout, setInterval ve zamanlayıcı kayması — resim 8
Başlamak ücretsiz

Yapay zeka eğitmeniyle JavaScript öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar
59
Dersler
200

Sıkça Sorulan Sorular

“setTimeout, setInterval ve zamanlayıcı kayması” dersi ücretsiz mi?

Evet — “setTimeout, setInterval ve zamanlayıcı kayması” 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.

“setTimeout, setInterval ve zamanlayıcı kayması” dersinde ne öğreneceğim?

Tek seferlik ve yinelenen görevleri setTimeout/setInterval ile zamanlayın ve zamanlayıcı kaymasını azaltan basit bir teknik öğ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 1. dersidir.

“setTimeout, setInterval ve zamanlayıcı kayması” 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

  1. setTimeout, setInterval ve zamanlayıcı kayması
  2. Debounce ve Throttle — Elle Yazım
  3. Animasyon Zamanlaması — Zamana Dayalı Döngülere Giriş
← JavaScript Academy Sayfasına Dön