Как задержать вызов ajax на несколько секунд

Question

Я не уверен, что это лучший способ отправить 2 ajax togheter для Facebook API. Но это работает, проблема в том, что иногда я получаю второй ajax (result_flow.php) перед первым (result.php) Будет полезно отложить второй ajax (url: result_flow.php) на 3 секунды или изменить этот код каким-либо образом, чтобы отдать приказ.

Я пробовал setTimeout, но не работал.

$('#sub').click(function () {
    var data = $("input#dataInput").val();
    console.log(data);
    var total = $("input#totalInput").val();
    var subscriber_id = $("input#subscriber_id").val();
    var res_name = $("input#res_name").val();
    var dataString = 'data='+ data + '&total=' + total + '&subscriber_id=' + subscriber_id+ '&res_name=' + res_name;
    console.log(dataString);
    $.ajax({
        type: "POST",
        url: "result.php",
        data: dataString,
        success: function(data) {
            console.log(data);
           if(data==='success'){
               //localStorage.clear();
                   MessengerExtensions.requestCloseBrowser(function success() {
                       console.log("Webview closing");
                   }, function error(err) {
                       console.log(err);
                   });
                            }
        }
    });
    $.ajax({
        type: "POST",
        url: "result_flow.php",
        data: dataString,
        success: function(data) {
        setTimeout(function(){
            console.log(data);
           if(data==='success'){
                            }
        },3000);
      }
    });
}

Answer 1

Я бы предложил использовать async / await в настоящее время, довольно просто использовать AJAX-вызовы последовательно:

$('#sub').click(async () => {
    ...
    try {
        let data = await $.post({
            url: "result.php",
            data: dataString
        });
        if (data === 'success') {
            ...
        }
        data = await $.post({
            url: "result_flow.php",
            data: dataString
        });
        if (data === 'success') {
            ...
        }
    } catch (err) {
        console.log(err);
    }
});

Не проверено, так как я не работаю с jQuery - но это должно дать вам идею. Поскольку $.ajax/$.post поддерживает Promises, он должен работать с async / await. Имейте в виду, что вам может понадобиться перенести код с Babel для старых браузеров, но я все равно рекомендую использовать Babel.

Если вы хотите использовать оба вызова AJAX параллельно, используйте Promise.all (потому что они не зависят друг от друга) - результаты будут в порядке, поэтому вы можете убедиться, что код обратного вызова вызывается по порядку.

Answer 2

Вы должны позвонить им по цепочке. Успех ... тогда ... лучше всего использовать обещание.

Никогда не доверяйте полученному вами заказу, если он явно не написан вами.

JQuery Ajax

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() 
callbacks are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), 
and jqXHR.always() instead.

Вы можете сделать что-то вроде этого:

// First Ajax call
$.ajax({
  // Do the request
  // Remove success to use new promise
})
.done(function( data ) {
    // Add the success here
    // Add the Second Ajax call here or create a function to call it, whatever you want
});

Answer 3

Во-первых, setTimeout() не работает, потому что вы помещаете его в функцию обратного вызова, что означает, что он будет выполнен, когда запрос уже выполнен.В любом случае, это неправильный способ решения такой задачи, вы должны поместить второй запрос в обратный вызов первого, чтобы он выполнялся по завершении первого.
Код выглядит следующим образом:

$('#sub').click(function() {
    var data = $("input#dataInput").val();
    console.log(data);
    var total = $("input#totalInput").val();
    var subscriber_id = $("input#subscriber_id").val();
    var res_name = $("input#res_name").val();
    var dataString = 'data=' + data + '&total=' + total + '&subscriber_id=' + subscriber_id + '&res_name=' + res_name;
    console.log(dataString);
    $.ajax({
        type: "POST",
        url: "result.php",
        data: dataString,
        success: function(data) {
            console.log(data);
            if (data === 'success') {
                //localStorage.clear();
                MessengerExtensions.requestCloseBrowser(function success() {
                    console.log("Webview closing");
                }, function error(err) {
                    console.log(err);
                });

                $.ajax({
                    type: "POST",
                    url: "result_flow.php",
                    data: dataString,
                    success: function(data) {
                        console.log(data);
                    }   
                });
            }      
        }
    });
}

Обратите внимание, что в моем коде второй запрос отправляется только в том случае, если первый запрос выполнен успешно, поскольку он помещен в оператор if (data === 'success') {...}.