javascript - 按顺序执行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();
    });

我有这个js代码。我需要按顺序执行 on(click) 中的函数，即 fn_one() 首先执行，fn_two() 第二个执行，依此类推。

请举一个简单的例子来说明如何实现这一目标。

编辑:好的，我使用了前一个函数中要执行的下一个函数，但仍然得到了错误的数据。所以我想我意识到为什么会发生这种情况。我将解释 $('#search-city-form').trigger('click'); 的作用。它触发表单提交，从而进行 Ajax 调用，并且其他函数不会等待 ajax 请求完成。那么如何让它等待ajax请求完成呢？

编辑2: $('#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

我会做这个。如果您需要在函数触发时进行验证，也许您需要使用 Promise。

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