jQuery Academy · Ders

Birden Çok Eşzamansız Görevi Ele Alma

Birbirinden bağımsız veya birbirine bağlı çeşitli eşzamansız görevleri koordine etme sanatında ustalaşın; tüm işlemlerde doğru yürütme sırasını ve hata yönetimini sağlayın.

Birden Çok Eşzamansız Görevi Ele Alma, CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 3 dersinin 3. 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.

Zaman Uyumsuz Görevler Neden Eşgüdümlenir?

Web geliştirmede birçok işlem zaman uyumsuzdur. Bu, işlemlerin anında veya kesin bir sırayla gerçekleşmediği anlamına gelir. Bir sunucudan veri getirmeyi, görüntüleri yüklemeyi veya animasyonları çalıştırmayı düşünün.

Uygulamanızın bu görevlerden birden fazlasını aynı anda veya belirli bir sırayla gerçekleştirmesi gerektiğinde, bunları etkili bir şekilde eşgüdümlemek için bir yönteme ihtiyacınız olur. Bu derste bunu nasıl yapacağınız gösterilecektir!

Birden Çok Görevin Zorluğu

Bir kullanıcının profilini ve en son bildirimlerini yüklemeniz gerektiğini düşünün. Bunların ikisi de ayrı sunucu istekleridir.

İkisinin de ne zaman tamamlandığını nasıl bileceksiniz?
Ya biri başarısız olursa?
Ya biri diğerine bağlıysa (örneğin profilde bulunan belirli bir kullanıcı ID'si için bildirimleri alma)?

Uygun bir eşgüdüm olmadan kullanıcı arayüzünüz eksik veriler gösterebilir veya tamamen bozulabilir.

Paralel İşlemler için `$.when()`

jQuery'nin $.when() yöntemi, birden çok bağımsız zaman uyumsuz işlemi eşgüdümlemek için güçlü bir araçtır. Bir veya daha fazla Deferred/Promise nesnesini bağımsız değişken olarak alır.

$.when(), kendisine aktarılan tek tek Promise'lerin tümü çözümlendiğinde çözümlenecek bir ana Promise döndürür. Bunlardan herhangi biri reddedilirse ana Promise hemen reddedilir.

`$.when()` Örneği: Paralel Veri Getirme

İki farklı veri kümesini paralel olarak getirme işlemini benzetelim. Gösterim amacıyla AJAX isteklerini taklit etmek için $.Deferred() kullanacağız.

Bu kodu çalıştırmayı deneyin:

// Assume jQuery is loaded in the environment
$(function() {
  function fetchData(name, delay) {
    let dfd = $.Deferred();
    setTimeout(function() {
      console.log(`Finished fetching ${name}`);
      dfd.resolve(`Data for ${name}`);
    }, delay);
    return dfd.promise();
  }

  let profilePromise = fetchData("User Profile", 1500);
  let settingsPromise = fetchData("App Settings", 800);

  console.log("Starting parallel fetches...");

  $.when(profilePromise, settingsPromise)
    .done(function(profileData, settingsData) {
      console.log("All data loaded successfully!");
      console.log(`Profile: ${profileData}`);
      console.log(`Settings: ${settingsData}`);
    });
});

`$.when()` Sonuçlarını İşleme

$.when() Promise'i çözümlendiğinde, kendisine ait .done() geri çağırma işlevi, özgün Promise'lerin çözümlenmiş değerlerini ayrı bağımsız değişkenler olarak alır.

$.when()'e N Promise aktarırsanız .done() geri çağırma işlevi N bağımsız değişken alır.
Bağımsız değişkenler, Promise'lerin $.when()'e aktarılma sırasıyla aynıdır.

Bu, tüm sonuçlar hazır olduğunda onlarla çalışmayı kolaylaştırır.

`$.when()` Hatalarını İşleme

Paralel işlemlerden biri başarısız olursa ne olur? $.when()'in ana Promise'i, tek tek Promise'lerden herhangi biri reddedilirse hemen reddedilir.

Ardından .fail() geri çağırma işlevi tetiklenir ve başarısız olan ilk Promise'in reddedilme nedenini alır. Kalan paralel işlemler tamamlanmaya devam eder; ancak $.when() başarısızlık sinyalini zaten vermiş olur.

Örnek: Başarısızlıkla `$.when()`

Önceki örneği, veri getirme işlemlerinden birinin başarısız olacağı şekilde değiştirelim. Çıktıyı gözlemleyin:

// Assume jQuery is loaded in the environment
$(function() {
  function fetchData(name, delay, shouldSucceed = true) {
    let dfd = $.Deferred();
    setTimeout(function() {
      if (shouldSucceed) {
        console.log(`Finished fetching ${name}`);
        dfd.resolve(`Data for ${name}`);
      } else {
        console.log(`Failed to fetch ${name}`);
        dfd.reject(`Error: ${name} could not be loaded`);
      }
    }, delay);
    return dfd.promise();
  }

  let profilePromise = fetchData("User Profile", 1500, true);
  let settingsPromise = fetchData("App Settings", 800, false); // This one will fail

  console.log("Starting parallel fetches (one will fail)...");

  $.when(profilePromise, settingsPromise)
    .done(function(profileData, settingsData) {
      console.log("All data loaded successfully! (This won't run)");
    })
    .fail(function(errorReason) {
      console.log("One or more operations failed!");
      console.log(`Reason: ${errorReason}`);
    });
});

Bağımlı Görevleri Eşgüdümleme

Bazen görevler bağımsız değildir. Şunları yapmanız gerekebilir:

Bir kullanıcı ID'si getirmek.
Ardından bu ID'yi kullanarak kullanıcının ayrıntılarını getirmek.
Sonra bu ayrıntıları kullanarak kullanıcıya özel gönderileri getirmek.

Bu, her adımın bir önceki adımın başarısına ve sonucuna bağlı olduğu ardışık bir zaman uyumsuz işlemler zinciri gerektirir. Bunu .then() veya .pipe() ile birbirine bağlayarak gerçekleştiririz.

Örnek: Bağımlı AJAX İşlemlerini Birbirine Bağlama

İkinci çağrının birincinin sonucuna bağlı olduğu, benzetilmiş iki AJAX çağrısını nasıl birbirine bağlayabileceğiniz aşağıda gösterilmiştir. Birinci .then()'in dönüş değerinin sonraki için nasıl girdi hâline geldiğine dikkat edin.

// Assume jQuery is loaded in the environment
$(function() {
  function fetchUserId() {
    let dfd = $.Deferred();
    setTimeout(() => {
      console.log("User ID fetched: 123");
      dfd.resolve(123);
    }, 500);
    return dfd.promise();
  }

  function fetchUserDetails(userId) {
    let dfd = $.Deferred();
    setTimeout(() => {
      if (userId === 123) {
        console.log(`Details fetched for user ${userId}`);
        dfd.resolve(`Details for User ${userId}`);
      } else {
        dfd.reject("Invalid User ID");
      }
    }, 700);
    return dfd.promise();
  }

  console.log("Starting dependent fetch chain...");

  fetchUserId()
    .then(function(id) {
      return fetchUserDetails(id); // Return a new promise
    })
    .done(function(details) {
      console.log("Full chain successful!");
      console.log(`Final Result: ${details}`);
    })
    .fail(function(error) {
      console.log("Chain failed:", error);
    });
});

Bilginizi Sınayın

Bir kullanıcının profilini ve arkadaş listesini yüklemek istediğiniz bir senaryoyu düşünün. Arkadaş listesi isteği, profil verilerinin bir parçası olan kullanıcı ID'sine ihtiyaç duyar.

Bu özel eşgüdüm için hangi jQuery yaklaşımı en uygundur?

Tekrar: Zaman Uyumsuz Eşgüdümde Uzmanlaşma

Birden çok zaman uyumsuz görevi etkili bir şekilde nasıl yöneteceğinizi öğrendiniz!

$.when(): Bağımsız görevleri paralel olarak çalıştırmak ve tümünün tamamlanmasını veya herhangi birinin başarısız olmasını beklemek için idealdir.
.then() ile birbirine bağlama: Bir işlemin çıktısının sonraki işlem için gerekli olduğu bağımlı görevler için mükemmeldir.
Hata İşleme: Hem $.when() hem de birbirine bağlanmış Promise'ler, herhangi bir noktadaki reddedilmeleri yakalamak için .fail() sağlar; bu da uygulamalarınızı daha sağlam hâle getirir.

Bu kalıplar, jQuery ile dinamik ve duyarlı web uygulamaları oluşturmak için çok önemlidir.

Sıkça Sorulan Sorular

“Birden Çok Eşzamansız Görevi Ele Alma” dersi ücretsiz mi?

Evet — “Birden Çok Eşzamansız Görevi Ele Alma” 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.

“Birden Çok Eşzamansız Görevi Ele Alma” dersinde ne öğreneceğim?

Birbirinden bağımsız veya birbirine bağlı çeşitli eşzamansız görevleri koordine etme sanatında ustalaşın; tüm işlemlerde doğru yürütme sırasını ve hata yönetimini sağlayı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 3. dersidir.

“Birden Çok Eşzamansız Görevi Ele Alma” 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

← jQuery Academy Sayfasına Dön