éviter les liaisons multiples ajax

Question

sur le changement de boîte de sélection dans le panneau modal. Je lance une requête ajax et le chargement des données du panneau modal dépend de la réponse.

Je vois d'abord qu'une seule requête est en cours à la première tentative. mais il continue à augmenter avec le nombre de fois avec l'option de sélection.

ci-dessous est mon script

$(".dds").msDropDown(); 
$('#dropdown').off('change'); 
$('#dropdown').on('change', takeAction); 

function takeAction(event){ 
event.preventDefault(); 
var colour = $('#colors .selected').attr('data-color'); 
console.log(colour); 
new Ajaxinator().jsonPost({ 
    url :$(event.currentTarget).val(), 
    data : { 
     name : $(event.currentTarget).attr('title'), 
     colour : colour 
    }, 
    success: function (response) 
    { 
    $('#dropdown').off('change'); 

    $('#Data').html(response.Data); 
    $('#dropdown').off('change',takeAction); 

} 
}); 

}; 

Je pense que cela est dû à chaque demande ajax la nouvelle liaison est crée pour #dropdown et onchange fonction appelle plusieurs fois. Quelqu'un peut m'aider.

Answer 1

Pourriez-vous essayer?

var oAJAXRequest = false; //GLOBAL VARIABLE 

$("#dropdown").unbind('change'); 
$("#dropdown").bind('change', takeAction); 


function takeAction(){ 

    if(oAJAXRequest != false){ 
     return; 
    } 

    event.preventDefault(); 
    var colour = $('#colors .selected').attr('data-color'); 
    oAJAXRequest = $.ajax({ 
     type: 'POST', 
     url: $(event.currentTarget).val(), 
     data : { 
      name : $(event.currentTarget).attr('title'), 
      colour : colour 
     }, 
     success: function(data) { 
      $('#Data').html(response.Data); 
      oAJAXRequest = false; 
     }, 
     error: function(jqXHR, sMessage, oException) { 
      oAJAXRequest = false; 
     } 
    }); 
} 

Answer 2

J'utilisé

$('#dropdown').off('change',takeAction); 

a marché pour moi.