按顺序执行jquery函数

Question

function fn_one() {
   $('#search-city-form').trigger('click');
}

function fn_two() {
   $("form input[name='tariffId']").val("137");
   $('#search-city-form').trigger('click');
}

function fn_three() {
   $("form input[name='tariffId']").val("138");
   $('#search-city-form').trigger('click');
}

function fn_four() {
   $("form input[name='tariffId']").val("139");
   $('#search-city-form').trigger('click');
}

$(document).on('click','.ui-menu li',function(){

        fn_one();

        fn_two();

        fn_three();

        fn_four();
    });

I have this js code. I need to execute the functions in on(click) in order, ie fn_one() goes first, fn_two() second and etc.

Please give simple example of how can I achieve this.

Edit: OK, I used the next function to be executed in the previous one but still I was getting erraneous data. So I think I realized why this is happening. I will explain what $('#search-city-form').trigger('click'); does. It triggers a form submit which makes an Ajax call and other function are not waiting till ajax request is complete. So how do I make it to wait for ajax request to complete?

EDIT 2: Event handler for $('#search-city-form') :

            $('#cdek').submit(function() {

            var formData = form2js('cdek', '.', true, function(node) {
                if(node.id && node.id.match(/callbackTest/)) {
                    return {
                        name : node.id,
                        value : node.innerHTML
                    };
                }
            });
            var formDataJson = JSON.stringify(formData);
            // console.log(JSON.stringify(formData));
            document.getElementById('testArea').innerHTML = 'Отправляемые данные: <br />' + JSON.stringify(formData, null, '\t');

            $.ajax({
                url : 'http://api.cdek.ru/calculator/calculate_price_by_jsonp.php',
                jsonp : 'callback',
                data : {
                    "json" : formDataJson
                },
                type : 'GET',
                dataType : "jsonp",
                success : function(data) {
                        console.log(data.result.price);
                    } else {
                        for(var key in data["error"]) {
                            console.log(data["error"][key]);
                        }
                    }
                }
            });
            return false;
        });

Answer 1

I'll do this. If you need validate when the function has triggered, maybe you need to work with promises.

  function fn_one() { $('#search-city-form').trigger('click'); fn_two() } function fn_two() { $("form input[name='tariffId']").val("137"); $('#search-city-form').trigger('click'); fn_three() } function fn_three() { $("form input[name='tariffId']").val("138"); $('#search-city-form').trigger('click'); fn_four() } function fn_four() { $("form input[name='tariffId']").val("139"); $('#search-city-form').trigger('click'); } $(document).on('click','.ui-menu li',function(){ fn_one(); });