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

我会这样做的。如果您需要在函数触发时进行验证，可能需要使用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();
    });

按顺序执行jquery函数

1 个答案: