Выполнять функции jquery по порядку

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. Мне нужно выполнить функции по порядку (щелкнуть), т.е. сначала идет fn_one(), потом fn_two() и т. д.

Приведите простой пример того, как я могу этого добиться.

Обновлено: ОК, я использовал следующую функцию для выполнения в предыдущей, но все же я получал ошибочные данные. Думаю, я понял, почему это происходит. Я объясню, что делает $('#search-city-form').trigger('click');. Он запускает отправку формы, которая вызывает вызов Ajax, а другие функции не ждут завершения запроса ajax. Итак, как мне заставить его ждать завершения запроса ajax?

Обновлено еще раз: Обработчик событий для $('#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.info(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.info(data.result.price);
                    } else {
                        for(var key in data["error"]) {
                            console.info(data["error"][key]);
                        }
                    }
                }
            });
            return false;
        });

не закончится ли это бесконечным циклом из-за того, что на document есть обработчик кликов, который выполняет дальнейшие события кликов?

messerbill 19.03.2018 16:11

Согласно этому коду они выполняются по порядку.

Ele 19.03.2018 16:11

@messerbill нет, это делегирование событий на ui-menu li

Ele 19.03.2018 16:12

Чтобы быть уверенным в порядке, вы можете выполнять функции как обратные вызовы. Таким образом, второй начнется только тогда, когда закончится первый и т. д.

Takit Isy 19.03.2018 16:12

Уже выполнен в порядке. Используйте следующую функцию, которая будет выполняться в предыдущей функции. Например. Позвоните в fn_two в конце fn_one(). SetTimeout, если вы хотите задержку вызова

AdhershMNair 19.03.2018 16:13

@Ele и щелчок по элементу HTML (например, здесь <li>) - это не одновременный щелчок по document?

messerbill 19.03.2018 16:13

вы хотите временную задержку между звонками?

loa_in_ 19.03.2018 16:17

они в порядке. проверьте здесь> jsfiddle.net/q1ft25pn/39 посмотрите в консоли. Но вы можете вложить их, если хотите, как предлагали другие. @messerbill идея состоит в том, что он не работает так, как вы сначала предложили. Так, например, если есть еще один div, и щелкнуть по нему, он не вызовет щелчок по ui-menu li. Поэтому нажатие где угодно, кроме event delegation, работать не будет.

Mihai T 19.03.2018 16:18

Что делает $('#search-city-form').trigger('click');? Если я хорошо понимаю, когда вы нажимаете на .ui-menu li, вы запускаете щелчок на $('#search-city-form'), затем меняете значение $("form input[name='tariffId']"), затем снова запускаете щелчок, снова меняете значение, запускаете щелчок, изменяете значение и снова запускаете щелчок?

Mickaël Leger 19.03.2018 16:18

Это совершенно неясно, пожалуйста, отправьте Минимальный, полный и проверяемый пример, чтобы немного лучше понять ваш сценарий.

Ele 19.03.2018 16:20

хорошо, но, на мой взгляд, это все равно будет выполняться синхронно (потому что нигде в коде нет "асинхронных вызовов")

messerbill 19.03.2018 16:21

@messerbill да, ты прав.

Ele 19.03.2018 16:26

что происходит, когда вы запускаете код как есть, вызывает ли он какие-либо ошибки или вы не видите, что функции выполняются в правильном порядке?

Scaramouche 19.03.2018 17:17

@messerbill, пожалуйста, посмотрите правку

kulan 19.03.2018 19:43

@MickaelLeger, пожалуйста, проверьте правку.

kulan 19.03.2018 19:43

@Ele, пожалуйста, проверьте правку.

kulan 19.03.2018 19:44

Возможный дубликат Доступ к результату предыдущего обещания за секунду

messerbill 19.03.2018 19:45

пока мы говорим о звонках Ajax, это обман

messerbill 19.03.2018 19:45

Теперь все понятно!

Ele 19.03.2018 19:46

1.) Можете поделиться обработчиком событий search-city-form. 2.) Почему вы запускаете этот процесс (вызов ajax) с помощью .trigger('click')?

Ele 19.03.2018 19:50

@Ele 1) Пожалуйста, отметьте EDIT 2. 2) Я хочу имитировать отправку формы, в которой выполняется вызов ajax.

kulan 19.03.2018 21:33
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
21
69
1

Ответы 1

Я сделаю это. Если вам нужно проверить, когда функция сработала, возможно, вам нужно поработать с обещаниями.

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

Другие вопросы по теме