Запустим функцию по завершении другой с асинхронным аяксом (callBack)

Я снова со своими яваскриптами. Как говорится: «У кого чего болит – тот о том и говорит». А если серьёзно, то решений задачи больше одного, но сначала поподробнее о самой задаче.

Предположим в своём javascript-сценарии вам хочется без перезагрузки страницы вытащить какую-то информацию, скажем, из базы данных и на этой же странице произвести какие-то действия, основываясь на полученных данных. Ясен пень, придётся пользовать AJAX. И если вы не хотите «повесить» браузер, свой сайт, а может и весь веб-сервер, то лучше воспользоваться аяксом в асинхронном режиме. Что это даёт? Ну, в общем случае сценарий не ждёт окончания работы аякса, не ждёт возвращённых оттуда данных и просто продолжает выполнять последующие инструкции. Почитайте на досуге что-нибудь про многопоточность, чтобы стало яснее, о чём я. Современные браузеры даже сами вам дадут знать – напишут в консоли, что использовать ajax синхронно – нехорошо.

Однако во втором абзаце я сказал, что нам нужно дождаться загрузки этих данных. Предположим, нам важно, что именно вернёт запрос, чтобы на основе этой информации произвести ветвление сценария: вернулось одно значение – выполняем одни инструкции, при другом значении – другие. На лицо конфликт – браузер и здравый смысл подсказывают пользовать аякс асинхронно, а логика программы совсем наоборот. Как быть?

Ну, про промисы поговорим как-нибудь в другой раз, может быть :), а пока поговорим про обратный вызов функций, то есть про коллбэки.

Итак, вот решение: пишем разные функции на случай разных значений, которые прилетели в аяксе, и для наглядности, объявляем их как переменные.

А затем оформляем функцию, где расположен ajax-запрос. Оговорюсь, что я часто использую библиотеку jQuery и аякс-запрос буду оформлять с её помощью, не пугайтесь.

// функция для первого значения из запроса
var func1 = function()
{
    // какие-то действия
}

// функция для второго значения из запроса
var func2 = function()
{
    // другие действия
}

// функция с аякс-запросом
function funcWithAJAX(callBack1, callBack2)
{
    $.ajax({
        async: true,
        // другие инструкции с данными для запроса и адресом php-скрипта для обработки
        success: function(data)
        {
            // для простоты, пусть запрос из аякса вернёт число 1 или 2
            if (data == 1)
            {
                if (typeof callBack1 === 'function') callBack1();
            }
            else
            {
                if (typeof callBack2 === 'function') callBack2();
            }
        }
    });
}
// и наконец, то место программы, где и происходит магия :))  
// вызываем функцию с аяксом, передаём ей определённые ранее функции в качестве аргументов, следите за тем, чтобы после имён случайно не затесались скобочки. :)  
funcWithAJAX(func1, func2);

Если вы смотрели прошлую заметку на тему javascript, то наверное могли заметить, что проверку аргументов на то, являются ли они функциями, я почти без изменений взял оттуда. Кроме того, следует внимательно следить за тем, чтобы вызывая функцию с коллбэками, имена функций обратного вызова передавались бы без скобок, иначе функция таки запустится сразу, ещё до запуска основного запроса из аякса.

И последнее. Примеры, конечно, не полны, нет фрагментов кода для вывода ошибок, если аякс-запрос выполнился неуспешно, но это уже совсем другая история.