Всем нравится: время концептуального видео! Обратные вызовы - важная концепция в JavaScript. Это функции, которые вызываются после завершения выполнения действия. Затем придайте нашему коду структуру и время.
Возьмем, к примеру, анимацию, которую мы использовали в последнем видео. Для запуска анимации нужно время. Что, если вы хотите, чтобы сразу после завершения анимации произошло что-то еще? Вы должны сделать такую 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 (свойства (, продолжительность) (, ослабление) (, завершено))
Затем сразу после объясните ожидаемые типы.
Но в любом случае, вернемся к обратным вызовам. Вы можете довольно много вложиться. Представьте, что вы помещаете другую анимацию в функцию обратного вызова, и эта анимация имеет свой собственный обратный вызов. Это вполне разумно, так как вы можете сделать многоступенчатую анимацию. Вам просто нужно оставаться организованным.
См. Pen 450c5810be27a9a8946cb8012cbd1213 Криса Койера (@chriscoyier) на CodePen
Мы просто используем анимацию в качестве примера. Возможно, еще более распространенным использованием функций обратного вызова является Ajax. Ajax - это когда браузер обращается к другому ресурсу, не обновляя страницу. Это может занять совершенно неизвестное количество времени. Это зависит от пропускной способности и задержки, размера файла, условий ошибки и всего прочего. Скорее всего, вы ничего не сможете сделать с этим запросом Ajax, пока не получите что-то обратно или дополнительную информацию. Функции обратного вызова идеально подходят для этого, и мы поговорим об этом позже.