Execute jquery functions in order

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, i.e. 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;
        });

won't this end up in an infinite loop due to there is a click handler on `document` which executes further click events? — messerbill, Mar 19 '18 at 15:11
To be sure about the order, you can execute the functions as callbacks. That way, the 2nd will start only when the first one ends, etc… — Takit Isy, Mar 19 '18 at 15:12
Already executed in order. Use the next function to be executed in previous function. For Example. Call `fn_two` at the end of `fn_one()`. SetTimeout if you want any delay in calling — Adharsh M, Mar 19 '18 at 15:13
they are in order. check here > http://jsfiddle.net/q1ft25pn/39/ look in console . But you can nest them if you want as others have suggested. @messerbill the ideea is that it doesn't work as you first suggested. So for eg if there is another div, and click on it, it won't trigger the click on the `ui-menu li` . So clicking anywhere except the `event delegation` won't work — Mihai T, Mar 19 '18 at 15:18
What does the `$('#search-city-form').trigger('click');` do? If I understand well, when you click on `.ui-menu li` you trigger the click on `$('#search-city-form')`, then change your `$("form input[name='tariffId']")` value, then trigger click again, change value again, trigger click, change value and trigger click again? — Mickaël Leger, Mar 19 '18 at 15:18
This is totally unclear, Please post a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) to understand a little more your scenario. — Ele, Mar 19 '18 at 15:20
ok, but in my opinion this will be executed synchronously anyway (because there are no "async calls" anywhere in the code) — messerbill, Mar 19 '18 at 15:21
what happens when you run the code as is, does it throw any errors or you don't see the functions executing in the right order? — Scaramouche, Mar 19 '18 at 16:17
Possible duplicate of [Access result of previous promise inside a second](https://stackoverflow.com/questions/49137143/access-result-of-previous-promise-inside-a-second) — messerbill, Mar 19 '18 at 18:45
1.) Can you share the event handler of `search-city-form`. 2.) Why are you triggering that process (ajax call) using `.trigger('click')`? — Ele, Mar 19 '18 at 18:50
@Ele 1)Please check EDIT 2. 2)I want to emulate form submission where ajax call is made. — kulan, Mar 19 '18 at 20:33

score 1 · Answer 1 · answered Mar 19 '18 at 16:51

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();
    });

Execute jquery functions in order

1 Answers1