Herkesin favorisi: konsept video zamanı! Geri çağırmalar, JavaScript'te önemli bir kavramdır. Bir eylemin çalışması tamamlandığında çağrılan işlevlerdir. Ardından kodumuza yapı ve zamanlama ekleyin.
Örneğin son videoda kullandığımız animasyonu ele alalım. Animasyonların çalışması zaman alır. Ya animasyon bittiğinde başka bir şeyin olmasını istiyorsanız? setTimeoutAnimasyonla aynı uzunlukta bir yapmak zorunda mısınız? Hayır! jQuery bize sadece bu amaç için kullanılan geri arama işlevlerini verir.
Genellikle yönteme aktardığımız ek parametrelerdir. Animasyon durumunda, son parametre olarak bir fonksiyon geçiririz. Bu geri arama işlevidir ve animasyon tamamlandığında çağrılacaktır.
$("#element").animate(( // stuff to animate ), function() ( // callback function ));Bu biraz garip görünüyor belki, ama esasen sadece yapıyoruz:
.animate(a, b)Burada abir özellik ve değer nesnesi ve bbir geri arama işlevidir.
Ancak son videodan, animasyonun bir animasyonun ne kadar süreceğini belirten bir zamanlama parametresi de alabileceğini biliyoruz. Bu nereye gidiyor? Bu, geri çağırma işlevi gibi isteğe bağlı bir parametredir. Kullanmak isteseydik, tam ortaya koyardık, yani esasen:
.animate(propertiesObject, duration, callback);Ayrıca, bir hareket hızı değerini belirtmek için geçirebileceğimiz başka bir isteğe bağlı parametre daha var.
.animate(propertiesObject, duration, easing, callback);jQuery, bu isteğe bağlı parametreler konusunda havalı ve akıllıdır. Ortadaki ikisini dışarıda bırakırsanız ve geri aramayı iletirseniz, ilettiğiniz şeyin bir sayı veya dize değil, bir işlev olduğunu söyleyebilir, böylece geri arama işlevi kastettiğinizi anlar. Sahte değerleri veya başka bir şeyi iletmek zorunda değilsiniz. Bu sadece iyi bir API tasarımı!
JQuery belgelerine baktığınızda, bunu şu şekilde gösterirler:
.animate (özellikler (, süre) (, yumuşatma) (, tamamlandı))
Sonra hemen sonra beklenen türleri açıklayın.
Ama her neyse, geri aramalara dönelim. Oldukça iç içe geçebilirsin. Geri arama işlevine başka bir animasyon eklediğinizi ve bu animasyonun kendi geri araması olduğunu hayal edin. Çok adımlı bir animasyon yapmak isteyebileceğiniz için bu tamamen mantıklı. Sadece düzenli kalman gerekiyor.
Pen 450c5810be27a9a8946cb8012cbd1213 by Chris Coyier (@chriscoyier) CodePen'de görün
Burada sadece örnek olarak animasyonu kullanıyoruz. Belki de geri arama işlevlerinin daha yaygın bir kullanımı Ajax'tır. Ajax, tarayıcının sayfayı yenilemeden başka bir kaynak çağırmasıdır. Bu tamamen bilinmeyen bir süre alabilir. Bant genişliğine ve gecikmeye, dosyanın boyutuna ve hata koşullarına ve her türlü şeye bağlıdır. Bir şeyi geri alana kadar veya başka türlü daha fazla bilgi alana kadar bu Ajax isteğiyle hiçbir şey yapamazsınız. Geri arama işlevleri bunun için mükemmeldir ve buna daha sonra değineceğiz.