Как отложить ajax-запрос?

Question

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

$('#save').click(function(){

    var user_input=$('#user').val();
    var section=$('#section').val();

    $('#loading_info').append('<p><img src="Images/loading.gif" alt="loading" id="loading"/></p>');
    $.ajax({
        url: 'submit_db.php',
        type: 'POST',
        data: 'section='+section+'&user_input='+user_input,
        success: function(result){
            $('#response').remove();
            $('#loading_info').append('<p id="response">' + result + '</p>');
            $('#loading').fadeOut(500, function(){
                $(this).remove();
            });
        }
    });
    return false;
});

То, что я тестировал и не работал: вставьте тайм-аут: 3000 в ajax - 1 запрос в порядке, но после этого все приложение зависает;установить время ожидания с помощью ajaxSetup () - та же ситуация.Протестировал функцию setInterval и поставил ей ajax-запрос - но после этого ajax не было, приложение открыло файл php реализации и зависло.

Это не работает:

$('#save').click(function(){
    var t=setTimeout(function(){
    var user_input=$('#user').val();
    var section=$('#section').val();

    $('#loading_info').append('<p><img src="Images/loading.gif" alt="loading" id="loading"/></p>');
    $.ajax({
        url: 'submit_db.php',
        type: 'POST',
        data: 'section='+section+'&user_input='+user_input,
        success: function(result){
            $('#response').remove();
            $('#loading_info').append('<p id="response">' + result + '</p>');
            $('#loading').fadeOut(500, function(){
                $(this).remove();
            });
        }
    });
    return false;            
    },3000);

});

И это тоже не работает:

$('#save').click(function(){

    var user_input=$('#user').val();
    var section=$('#section').val();

    $('#loading_info').append('<p><img src="Images/loading.gif" alt="loading" id="loading"/></p>');
    $.ajax({
        url: 'submit_db.php',
        type: 'POST',
        timeout: 3000,
        data: 'section='+section+'&user_input='+user_input,
        success: function(result){
            $('#response').remove();
            $('#loading_info').append('<p id="response">' + result + '</p>');
            $('#loading').fadeOut(500, function(){
                $(this).remove();
            });
        }
    });
    return false;
});

И, наконец, это тоже не работает:

$.ajaxSetup({
  timeout:3000,
});

Заранее спасибо

Answer 1

Я предлагаю создать логическое значение и отключить любую кнопку.

Создайте логическое значение с именем "buttonPressed", для него установлено значение false. Когда отправка сделана, вы проверяете свой код, если «buttonPressed» имеет значение false. Если для этого параметра не установлено значение false, пропустите запрос AJAX, в противном случае установите для buttonPressed значение true и выполните запрос AJAX. Когда запрос будет выполнен, установите для buttonPressed обратно значение false, и новое нажатие кнопки будет разрешено.

Answer 2

Ответ Пола Пилена, вероятно, лучший для вас, но другое безопасное решение - поставить ваши запросы в очередь.Это позволит вашему коду выполнять асинхронно, но все же последовательно и даже (потенциально) позволяет вам убивать дубликаты запросов, даже прежде чем они покинут машину.То, как я это сделал, выглядит примерно так:

1. Создайте массив для хранения ваших запросов.
2. Когда действие пользователя вызывает запрос, бросьте его в конец очереди.
3. Немедленно вызовите процессор очереди.Если предыдущие запросы еще не привели к ответу, ничего не делайте - просто оставьте его в очереди.В противном случае удалите первый элемент из очереди и обработайте его.На этом этапе вы также можете просматривать другие запросы в очереди и удалять дубликаты или отправлять высокоприоритетные запросы в верхнюю часть очереди.
4. Когда ответ получен, отправьте его туда, куда нужно перейтии скажите обработчику очереди обработать следующий запрос.

На самом деле это довольно просто построить, и я уверен, что есть лучшие варианты.Если возможна проблема со стабильностью сервера, вы должны встроить какой-то процесс для уничтожения мертвых запросов (зомби).

Answer 3

Проблема, вероятно, заключается в следующем: пользователь нажимает 3 раза в секунду и тратит 3 секунды времени ожидания, три запроса и отправляет в одну секунду.

Используйте setTimeout, но очищайте этот тайм-аут каждый раз, когда пользователь щелкает, поэтому каждый раз, когда пользователь нажимает, таймер сбрасывается, и вам не нужно беспокоиться об «очереди» запроса.

Другое решение состоит в том, чтобы обнаружить, работает ли таймер, и игнорировать или ставить пользователя в очередь (ставить в очередь, создавая новый тайм со значением 3000 + время покоя фактического таймера

Answer 4

Используйте переменную Sentinel, чтобы за один раз мог выполняться только один запрос.Если для пользователя имеет смысл иметь возможность отправлять более одного запроса, тогда создайте очередь для запросов, где вызов для обработки следующего элемента в очереди происходит после обработки предыдущего запроса.