Остановить дублирование Ajax Submisions?

Question

Мне интересно, как лучше всего остановить дублирующиеся представления при использовании jquery и ajax?

Я придумываю 2 возможных способа, но не уверен, что это единственные 2.

1. При запуске Ajax отключите все кнопки, пока запрос не будет выполнен. 2 проблемы, которые я вижу с этим, хотя я использую диалог модели jquery, поэтому я не знаю, насколько легко было бы отключить эти кнопки, так как я не уверен, что у них есть идентификаторы. Во-вторых, если запрос зависает, у пользователя нет возможности повторить попытку, поскольку все кнопки отключены.

2. Сейчас я ищу что-то под названием AjaxQueue, и я понятия не имею, является ли это тем, что мне нужно или как оно работает, поскольку сайт, где плагин явно недоступен для обслуживания.

http://docs.jquery.com/AjaxQueue

Редактировать

Я думаю, что это ответвление от того, на что я смотрел.

http://www.protofunc.com/scripts/jquery/ajaxManager/

Единственная проблема, которую я вижу с этим ajaxManager, заключается в том, что я думаю, что мне нужно изменить все свои $ .post, $ .get и $ .ajax на их тип.

Но что произойдет, если мне понадобится специальный параметр из $ .ajax? Или тот факт, что мне нравится использовать .post и .get.

Редактировать 2

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

First you have to construct/configure a new Ajaxmanager
//create an ajaxmanager named someAjaxProfileName
var someManagedAjax = $.manageAjax.create('someAjaxProfileName', {
    queue: true, 
    cacheResponse: true
});

Или я должен делать вышеперечисленное каждый раз?

Answer 1

Как насчет установки флага, когда пользователь нажимает кнопку? Флаг будет снят только после успешного выполнения запроса AJAX (в complete, который вызывается после обратных вызовов success и error), и вы отправите запрос AJAX, только если флаг не установлен. *

В связи с очередью AJAX существует плагин jQuery Message Queuing , который очень хорош. Я использовал это сам.

var requestSent = false;

jQuery("#buttonID").click(function() {   
   if(!requestSent) {
      requestSent = true;

      jQuery.ajax({
         url: "http://example.com",
         ....,
         timeout: timeoutValue,
         complete: function() {
             ...
             requestSent = false;
         },
      });
   }
});

Вы можете установить значение тайм-аута для длительных запросов (значение в миллисекундах), если вы считаете, что ваш запрос может зависнуть. Если происходит тайм-аут, вызывается обратный вызов error, после чего вызывается обратный вызов complete.

Answer 2

Вы можете сохранить активный запрос в переменной, а затем очистить его при получении ответа.

var request;  // Stores the XMLHTTPRequest object

$('#myButton').click(function() {
    if(!request) {  // Only send the AJAX request if there's no current request 

        request = $.ajax({  // Assign the XMLHTTPRequest object to the variable
            url:...,
            ...,
            complete: function() { request = null } // Clear variable after response
        });

    }
});

EDIT:

Одна приятная особенность в том, что вы можете отменить долго выполняющиеся запросы, используя abort().

var request;  // Stores the XMLHTTPRequest object
var timeout;  // Stores timeout reference for long running requests

$('#myButton').click(function() {
    if(!request) {  // Only send the AJAX request if there's no current request 

        request = $.ajax({  // Assign the XMLHTTPRequest object to the variable
            url:...,
            ...,
            complete: function() { timeout = request = null } // Clear variables after response
        });

        timeout = setTimeout( function() {
                        if(request) request.abort();  // abort request
                  }, 10000 );                         //   after 10 seconds

    }
});

Answer 3

$.xhrPool = {};
$.xhrPool['hash'] = []
$.ajaxSetup({
    beforeSend: function(jqXHR,settings) {
        var hash = settings.url+settings.data
        if ( $.xhrPool['hash'].indexOf(hash) === -1 ){
            jqXHR.url   = settings.url;
            jqXHR.data  = settings.data;
            $.xhrPool['hash'].push(hash);
        }else{
            console.log('Duplicate request cancelled!');
            jqXHR.abort();
        }
    },
    complete: function(jqXHR,settings) {
        var hash = jqXHR.url+jqXHR.data 
            if (index > -1) {
                $.xhrPool['hash'].splice(index, 1);
            }
        }
    });