Остановить дублирование 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.

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