按顺序执行jquery函数答案

【问题标题】：Execute jquery functions in order按顺序执行jquery函数
【发布时间】：2018-03-19 15:10:06
【问题描述】：

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

【问题讨论】：

由于document 上有一个点击处理程序会执行更多点击事件，这不会导致无限循环吗？
根据该代码，它们正在按顺序执行。
@messerbill 不，这是ui-menu li上的事件委托
为了确定顺序，您可以将函数作为回调执行。这样，第二个只会在第一个结束时开始，等等……
已经按顺序执行了。使用下一个函数在上一个函数中执行。例如。在fn_one() 末尾拨打fn_two。如果您想延迟调用，请设置超时

标签： javascript jquery

【解决方案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();
    });

【讨论】：