Ertelenmiş Nesneleri Anlama
jQuery'nin Ertelenmiş nesnelerinin temel kavramlarını, eşzamansız işlemleri nasıl temsil ettiklerini ve durumlarını (beklemede, çözümlendi, reddedildi) kavrayın.
Ertelenmiş Nesneleri Anlama, CoddyKit'te ücretsiz bir jQuery 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, 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.
Eşzamansız İşlemler ve Geri Çağırmalar
Web geliştirmede birçok görev anında gerçekleşmez. Bir sunucudan veri almayı veya kullanıcının tıklamasını beklemeyi düşünün. Bunlar eşzamansız işlemlerdir.
Geleneksel olarak geri çağırmalar kullanırdık: yalnızca eşzamansız bir görev tamamlandıktan sonra çalışan işlevler. Ancak iç içe geri çağırmalar "geri çağırma cehennemine" yol açarak kodun okunmasını ve bakımını zorlaştırabilir.
jQuery Deferred ile Tanışın
jQuery'nin Deferred nesneleri tam da bu noktada yardımımıza yetişir! Deferred nesnesi, eşzamansız işlemleri daha temiz bir şekilde yönetmenin güçlü bir yoludur.
Gelecekte elde edilecek bir sonucun yer tutucusu gibi davranır. İşlem başarılı olsun veya başarısız olsun, ana kodunuzu engellemeden işlem tamamlandığında çalışacak işlevleri bu nesneye bağlayabilirsiniz.
Deferred'ın Üç Durumu
Bir Deferred nesnesi, temsil ettiği eşzamansız görevin durumunu yansıtan üç durumdan birinde olabilir:
- Beklemede: Başlangıç durumudur. İşlem henüz tamamlanmamıştır.
- Çözümlendi: İşlem başarıyla tamamlanmıştır.
- Reddedildi: İşlem başarısız olmuş veya bir hatayla karşılaşmıştır.
Bir Deferred nesnesi çözümlendikten veya reddedildikten sonra durumu yeniden değişemez.
Deferred Nesnesi Oluşturma
$.Deferred() kullanarak yeni bir Deferred nesnesi oluşturursunuz. Bu nesne beklemede durumunda başlar.
Durumunu değiştirmek ve durum değiştiğinde çalışacak geri çağırma işlevlerini kaydetmek için yöntemler sunar.
Bir tane oluşturmayı deneyin:
var myDeferred = $.Deferred();
console.log('Deferred is pending: ' + (myDeferred.state() === 'pending'));Başarıyı Bildirme: .resolve()
Eşzamansız işleminiz başarıyla tamamlandığında Deferred nesneniz üzerinde .resolve() yöntemini çağırırsınız.
Bu, durumu beklemede durumundan çözümlendi durumuna değiştirir. .resolve() yöntemine ilettiğiniz bağımsız değişkenler başarı geri çağırmalarına aktarılır.
Durum değişikliğini izleyin:
var myDeferred = $.Deferred();
console.log('Initial state: ' + myDeferred.state());
setTimeout(function() {
myDeferred.resolve('Data fetched!');
console.log('New state: ' + myDeferred.state());
}, 1000);Başarısızlığı Bildirme: .reject()
Eşzamansız işleminiz başarısız olursa .reject() yöntemini çağırırsınız.
Bu, Deferred'ın durumunu beklemede durumundan reddedildi durumuna değiştirir. .reject() yöntemine aktarılan bağımsız değişkenler, genellikle hata mesajları olarak başarısızlık geri çağırmalarına gönderilir.
Reddetmenin nasıl çalıştığını görün:
var myDeferred = $.Deferred();
console.log('Initial state: ' + myDeferred.state());
setTimeout(function() {
myDeferred.reject('Network error!');
console.log('New state: ' + myDeferred.state());
}, 1000);Başarıyı .done() ile İşleme
Başarılı bir işleme (Deferred çözümlendiğinde) tepki vermek için .done() yöntemini kullanarak bir geri çağırma işlevi bağlarsınız.
Bu işlev yalnızca .resolve() çağrılırsa çalışır ve .resolve() tarafından aktarılan bağımsız değişkenleri alır.
Bazı verileri işleyelim:
var fetchData = function() {
var dfd = $.Deferred();
setTimeout(function() {
var success = true; // Simulate success
if (success) {
dfd.resolve('User data loaded.');
} else {
dfd.reject('Failed to load user data.');
}
}, 1000);
return dfd;
};
fetchData().done(function(message) {
console.log('Success handler: ' + message);
});Başarısızlığı .fail() ile İşleme
Benzer şekilde hataları (Deferred reddedildiğinde) işlemek için .fail() yöntemini kullanırsınız.
.fail() yöntemine aktarılan geri çağırma işlevi yalnızca .reject() çağrılırsa çalışır ve onun bağımsız değişkenlerini alır.
Bir hatayı simüle edelim:
var fetchData = function() {
var dfd = $.Deferred();
setTimeout(function() {
var success = false; // Simulate failure
if (success) {
dfd.resolve('User data loaded.');
} else {
dfd.reject('Failed to load user data.');
}
}, 1000);
return dfd;
};
fetchData().fail(function(errorMessage) {
console.log('Error handler: ' + errorMessage);
});Her Zaman Çalıştırma: .always()
Bazen eşzamansız işlem başarılı veya başarısız olsun, çalışması gereken kodlarınız olur. .always() bu durumda kullanılır.
.always() ile bağlanan geri çağırma işlevi, Deferred çözümlense de reddedilse de çalışır.
Temizleme işlemleri veya son kullanıcı arayüzü güncellemeleri için .always() kullanın:
var fetchData = function(shouldSucceed) {
var dfd = $.Deferred();
setTimeout(function() {
if (shouldSucceed) {
dfd.resolve('Data received!');
} else {
dfd.reject('Request failed!');
}
}, 1000);
return dfd;
};
fetchData(false)
.done(function(msg) { console.log('Success: ' + msg); })
.fail(function(err) { console.log('Failure: ' + err); })
.always(function() { console.log('Operation finished.'); });.promise() ile Koruma
Bir işlevden Deferred nesnesi döndürdüğünüzde, dış kodun bu nesnenin durumunu değiştirebilmesini istemeyebilirsiniz (örneğin doğrudan .resolve() veya .reject() çağırmasını).
.promise() yöntemi Deferred nesnesinin "salt okunur" bir sürümünü döndürür. Yalnızca geri çağırmaları bağlamaya yarayan yöntemleri (.done(), .fail(), .always() gibi) dışarı açar; durumunu değiştirmeye yarayan yöntemleri dışarı açmaz.
var createAsyncTask = function() {
var dfd = $.Deferred();
setTimeout(function() {
dfd.resolve('Task done!');
}, 500);
// Return only the promise, not the full Deferred object
return dfd.promise();
};
var taskPromise = createAsyncTask();
taskPromise.done(function(msg) {
console.log(msg);
});
// The following would throw an error or do nothing if trying to resolve/reject a promise
// taskPromise.resolve('Attempted to resolve externally'); // This is not possible on a promise objectBilginizi Sınayın
Bir Deferred nesnesinin zaman uyumsuz işlemi başarıyla tamamlandığında ONLY çalışacak bir geri çağırma işlevini kaydetmek için aşağıdaki yöntemlerden hangisini kullanırsınız?
Tekrar: Deferred Temelleri
Harika iş çıkardınız! Bu derste jQuery Deferred nesnelerinin temel kavramlarını öğrendiniz:
- Geri çağırma işlevi karmaşasından kaçınarak zaman uyumsuz işlemleri yönetirler.
- Beklemede, çözümlendi veya reddedildi durumlarında bulunurlar.
- Başarı için
.resolve(), başarısızlık için.reject()kullanırsınız. - Geri çağırma işlevleri
.done()(başarı),.fail()(başarısızlık) ve.always()(her ikisi) ile eklenir. .promise(), durumun değiştirilmesini korumak için salt okunur bir nesne döndürür.
Sırada bu güçlü nesneleri birbirine bağlamayı ve birleştirmeyi öğreneceksiniz!
Sıkça Sorulan Sorular
“Ertelenmiş Nesneleri Anlama” dersi ücretsiz mi?
Evet — “Ertelenmiş Nesneleri Anlama” 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.
“Ertelenmiş Nesneleri Anlama” dersinde ne öğreneceğim?
jQuery'nin Ertelenmiş nesnelerinin temel kavramlarını, eşzamansız işlemleri nasıl temsil ettiklerini ve durumlarını (beklemede, çözümlendi, reddedildi) kavrayı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 1. dersidir.
“Ertelenmiş Nesneleri Anlama” 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
- Ertelenmiş Nesneleri Anlama
- Promise'leri Zincirleme ve Birleştirme
- Birden Çok Eşzamansız Görevi Ele Alma