Могу ли я включить последовательность событий в функцию javascript .click?

Question

Добрый день!

У меня есть последовательность событий, которую я хотел бы, чтобы происходило в рамках функции onclick JavaScript. Однако, когда я добавляю несколько функций .post, которые обновляют БД, это не работает. Разве нельзя иметь более 1 функции .post внутри функции onclick? Вот мой код, добавив немного текста сюда, так как сайт не позволяет мне публиковать сообщения о том, что мне нужно добавить больше деталей, потому что я разместил в основном код. Пожалуйста, помогите, с нетерпением ждем вашей помощи

$('#vesmos').click(function(){
    var dt = new Date();
    var dformat = dt.getFullYear() + "/"
                + (dt.getMonth()+1)  + "/" 
                + dt.getDate()  + " "  
                + dt.getHours() + ":"  
                + dt.getMinutes() + ":" 
                + dt.getSeconds();
    //set start and end date on form fields
    if($.trim($('#stdt').val()) == ''){
        $('#stdt').val(dformat);
     }

    $('#enddt').val(dformat);

    //update rt table close rt log (code does not when I add this function)
    $.post("closert-docadminus.php",
    {
        empname: $("#empname").val(),

    });

    //calculate start and end date
    var strt = $('#stdt').val();
    var end = $('#enddt').val();

    var d2 = new Date(strt);
    var d1 = new Date(end);
    $('#insec').val(parseFloat(((d1-d2)/1000).toFixed(2)));
    $('#inmin').val(parseFloat(((d1-d2)/60000).toFixed(2)));
    $('#inhrs').val(parseFloat(((d1-d2)/3600000).toFixed(2)));

    //save to ams table logs
    $.post("savesettings.php",
    {
        empname: $("#empname").val(),
        task: $("#task").val(),
        dttoday: $("#dttoday").val(),
        stdt: $("#stdt").val(),
        enddt: $("#enddt").val(),
        insec: $("#insec").val(),
        inmin: $("#inmin").val(),
        inhrs: $("#inhrs").val(),
        pltform: $("#pltform").val(),

    });

    //clear textboxes
    $('#stdt').val("");
    $('#enddt').val("");
    $('#task').val("");
    $('#pltform').val("");


    //fill textboxes
    $('#task').val("Mail Open/Sort");
    $('#pltform').val("VES");
    $('#stdt').val(dformat);
    $('#statype').val("Occupancy");
    $('#statprio').val("Primary");

    // save log to rt table (code does not when I add this function)
    save to realtime
    $.post("savert-docadminus.php",
    {
        empname: $("#empname").val(),
        task: $("#task").val(),
        stdt: $("#stdt").val(),

    });
});

Answer 1

Вы можете иметь огромные события. Это не работает из-за асинхронного характера Javascript. Все вызовы ввода / вывода являются асинхронными, поэтому третий вызов может закончиться первым sh, а второй вызов может завершиться sh последним. Вы должны узнать больше о Javascript Событии l oop.

Answer 2

Учитывая, что ОП разъяснил в разделе комментариев, что «проблема» заключается в следующем: отправка XHR последовательно один за другим, я добавляю второй ответ о том, как этого добиться, но сначала я попытаюсь объясните вкратце, почему добавление вызова $ .post после другого не работает.

XMLHTTPRequests по умолчанию асинхронны. Это заставляет вас думать в асинхронной области и предполагать, что вызов:

asyncFunction1() ($.post)
asyncFunction2() ($.post)

не означает, что asyncFunction2 будет выполняться, когда asyncFunction1 завершит свое выполнение

1. Это не означает, что JavaScript является параллельным - многопоточным. JavaScript является однопоточным и асинхронным, для разрешения выполнения кода используется событие l oop. Подробнее об этом здесь .
2. Ajax (XMLHTTPRequests - $ .post) - это функция, определяемая браузером c ... Браузер может открывать отдельный поток по порядку отправить запрос, но это не имеет большого значения, потому что помните, что на уровне языка программирования (JavaScript) у нас нет потоков.

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

Для этого есть несколько шаблонов:

1. Обратные вызовы
2. Promises
3. Async / Await

И, как правило, асинхронная функция должна предоставить вам API для этого, по крайней мере, хороший старый обратный вызов.

Согласно jQuery .post ($ .post) документации , вы можете добавить обратный вызов, например:

$.post('url', data).done(function (response1) {
    // Next code here
})

, что приведет вам:

$.post('url1', data1).done(function (response1) {
    // The first XHR finished successfully, we send the second
    $.post('url2', data2).done(function (response2) {
        $.post('url2', data2).done(function (response2) {
            // The second XHR finished successfully, we send the third and so on
            $.post('url3', data3).done(function (response3) {...})
        })
    })
})

Что в конечном итоге заставит вас сказать

«Вложение кода не хорошо, хорошо и легко поддерживать, как я могу сделать его чище? "

Поздравляем, вы вошли в домен Callback Hells

Answer 3

То, что вы пытаетесь сделать, это набор одновременных XMLHTTPRequests

В зависимости от браузера у вас будет набор максимально одновременных XHR, есть список здесь . Но даже если их слишком много, они будут поставлены в очередь, и поэтому браузер отправит их в будущем.

Вы пытаетесь сделать 3 одновременных XHR в обработчике события щелчка, я не понимаю, как это проблема. Просто сказать «это не работает» не достаточно информации о проблеме, вам нужно копать и отлаживать.

Вот что я рекомендую вам сделать:

1, Откройте «Консоль» откройте вкладку инструментов разработчика и убедитесь, что в консоли отсутствуют ошибки JavaScript, препятствующие отправке XHR.

2, откройте вкладку «Сеть» в инструментах разработчика и убедитесь, что XHR эффективно отправляются; если они есть, проверьте ответ сервера.

3, В ваших вызовах .post добавьте обратные вызовы .done и .fail, чтобы подтвердить, что отвечает сервер, например:

$.post("some.php", data: { name: "John", location: "Boston" })
  .done(function (response) {
      console.log(response);
  })
  .fail(function (jqXHR, textStatus, errorThrown) {
      console.log(textStatus);
      console.log(errorThrown);
  });

Это должно привести вас к root причине (ам) проблемы