Улюблений усіма: час для концептуального відео! Зворотні дзвінки є важливим поняттям у JavaScript. Це функції, які викликаються, коли дія завершилася. Потім надайте структуру та терміни нашому коду.
Візьмемо для прикладу анімацію, яку ми використовували в останньому відео. Для запуску анімації потрібен час. Що робити, якщо ви хочете, щоб щось інше сталося прямо після закінчення анімації? Чи потрібно робити a setTimeoutна ту саму довжину, що й анімація? Ні. jQuery надає нам функції зворотного виклику, які використовуються саме для цієї мети.
Зазвичай вони є додатковим параметром, який ми передаємо методу. У випадку анімації ми передаємо функцію як останній параметр. Це функція зворотного виклику, і вона буде викликана, коли анімація завершиться.
$("#element").animate(( // stuff to animate ), function() ( // callback function ));Можливо, це виглядає дещо забавно, але по суті ми просто робимо:
.animate(a, b)Де aє об’єктом властивостей і значень, і bє функцією зворотного виклику.
Але з останнього відео ми знаємо, що анімація також може приймати параметр синхронізації, який визначає, скільки часу триватиме анімація. Куди це дінеться? Це необов’язковий параметр, як і функція зворотного виклику. Якби ми хотіли ним скористатися, ми б поставили його прямо посередині, так по суті:
.animate(propertiesObject, duration, callback);І є ще один необов’язковий параметр, рядок, який ми можемо передати, щоб вказати значення ослаблення.
.animate(propertiesObject, duration, easing, callback);jQuery просто буває крутим та розумним щодо цих необов’язкових параметрів. Якщо ви пропустите середні два і просто передасте зворотний виклик, це може сказати, що ви передаєте це функція, а не число або рядок, тому воно знає, що ви маєте на увазі функцію зворотного виклику. Вам не потрібно передавати помилкові цінності або щось інше. Це просто хороший дизайн API!
Коли ви переглядаєте документацію jQuery, вони показують це так:
.animate (властивості (, тривалість) (, послаблення) (, повна))
Тоді відразу після поясніть очікувані типи.
Але в будь-якому разі повернемося до зворотних викликів. Ви можете отримати досить вкладене. Уявіть, що ви додали ще одну анімацію у функцію зворотного виклику, і ця анімація має свій власний зворотний виклик. Це цілком розумно, оскільки ви можете зробити багатоступеневу анімацію. Вам просто потрібно бути організованими.
Дивіться ручку 450c5810be27a9a8946cb8012cbd1213 Кріса Койєра (@chriscoyier) на CodePen
Тут ми просто використовуємо анімацію як приклад. Можливо, ще більш поширеним використанням функцій зворотного виклику є Ajax. Ajax - це коли браузер звертається до іншого ресурсу, не оновлюючи сторінку. Це може зайняти абсолютно невідому кількість часу. Це залежить від пропускної здатності та затримки, а також від розміру файлу, умов помилок та всіх видів матеріалів. Ви, швидше за все, не можете нічого зробити з цим запитом Ajax, поки не отримаєте щось назад або іншим чином більше інформації. Функції зворотного виклику ідеально підходять для цього, і ми розглянемо це пізніше.