Почему вызов функции происходит в конце?

Question

[Александр Вербицкий]

Почему при клике на кнопку сначала вызывается alert(category_list), где переменная category_list = undefined, и только потом идет вызов функции categoryList, а не наоборот?

получается что выводится пустая переменная.

function categoryList() {
    $.ajax({
        url: '/category/list',
        success: function (res) {
            return res;
        },
    });
}

$('.category-button').on('click', function(){
    var category_list = categoryList();
    alert(category_list);
}

Answer 1

[Dmitry Bay]

Сначала вызывается
var category_list = categoryList();

А потом
alert(category_list);

Так что все работает как задумано. Другое дело, что alert() вызывается быстрее, чем функция categoryList(); успевает завершиться. А теперь читайте доки по $.ajax и ищите пункт callback()

Comments

[Павел Корнилов]

Всё верно. Уточню для ТС, что при выполнении аякс-запроса серверу - коллбэк вызывается после получения ответа, выпадая из синхронной цепочки JS. Почему он, собственно и назван AJAX.
Поэтому alert из приведённого кода покажет нужный результат лишь из тела коллбэка, то есть:

function categoryList() {
    $.ajax({
        url: '/category/list',
        success: function (res) {
            alert(res);
            return res;
        },
        
    });
}

Либо нужно использовать плохой подход:

function categoryList() {
    $.ajax({
        url: '/category/list',
        success: function (res) {
            return res;
        },
        async: false
    });
}

$('.category-button').on('click', function(){
    var category_list = categoryList();
    alert(category_list);
}