Операторы JavaScript выполняются построчно. Но, поскольку для завершения эффекта jQuery требуется некоторое время, код следующей строки может выполняться, пока предыдущий эффект все еще выполняется. Чтобы этого не происходило, jQuery предоставляет функцию обратного вызова (Callback) для каждого метода.

Функция обратного вызова — это функция, которая выполняется после завершения эффекта. Функция обратного вызова передается в качестве аргумента для методов эффекта, и они обычно появляются в качестве последнего аргумента метода. Например, основной синтаксис метода эффекта jQuery slideToggle() с функцией обратного вызова может быть задан с помощью:

$(selector).slideToggle(duration, callback);

Рассмотрим следующий пример, в котором мы поместили операторы slideToggle() и alert() рядом друг с другом. Если вы попробуете этот код, предупреждение будет отображаться сразу после нажатия кнопки триггера, не дожидаясь завершения эффекта переключения слайдов.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow");
        alert("Эффект переключения слайдов завершен.");
    });   
});
</script>

И вот модифицированная версия этого примера, в котором мы поместили оператор alert() в функцию обратного вызова для метода slideToggle(). Если вы попробуете этот код, предупреждающее сообщение будет отображаться после завершения эффекта переключения слайдов.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow", function(){
            // Код должен быть выполнен после завершения эффекта
            alert("Эффект переключения слайдов завершен.");
        });
    });   
});
</script>

Точно так же вы можете определить функции обратного вызова для других методов эффекта jQuery, например show(), hide(), fadeIn(), fadeOut(), animate() и т.д.

Если метод эффекта применяется к нескольким элементам, то функция обратного вызова выполняется один раз для каждого выбранного элемента, а не один раз для всех.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1, p").slideToggle("slow", function(){
            // Код должен быть выполнен после завершения эффекта
            alert("Эффект переключения слайдов завершен.");
        });
    });   
});
</script>

Если вы попробуете приведенный выше пример кода, он будет отображать одно и то же предупреждающее сообщение два раза. Один раз для элемента <h1>, второй для <p>, после нажатия кнопки триггера.

Похожие посты

Руководство по синтаксису в jQuery

Оператор jQuery обычно начинается со знака доллара ($) и заканчивается точкой с запятой (;). В jQuery знак доллара ($) — это просто псевдоним для jQuery. Давайте рассмотрим следующий пример кода, который демонстрирует синтаксис кода на jQuery. Приведенный выше пример просто отображает предупреждающее сообщение «Hello World!» пользователю. Объяснение кода Давайте разберем приведенный выше пример подробнее. Тег…

Руководство по методу animate() в jQuery

jQuery-метод animate() используется для создания пользовательских анимаций. Метод animate() обычно используется для анимации числовых CSS-свойств, таких как width, height, margin, padding, opacity, top, left и т. д., Но нечисловые свойства, такие как color или background-color нельзя анимировать с помощью базовой функциональности jQuery. Не все CSS-свойства являются анимируемыми. Как правило, любое CSS-свойство, которое принимает значения в…

Руководство по удалению элементов и атрибутов в jQuery

jQuery предоставляет несколько методов, таких как empty(), remove(), unwrap()и т. д. для удаления существующих элементов HTML или содержимого из документа. jQuery-метод empty() jQuery-метод empty() удаляет из DOM все дочерние элементы, а также текстовое содержимое в выбранных элементах. Следующий пример удалит все содержимое внутри элементов с классом .container по нажатию кнопки. Согласно спецификации DOM W3C (World…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.