避免ajax使用多个选择器运行两次

Question

所以当有人更改输入或选择字段时，我想运行这段代码，显然这是两次运行，因为当我更改输入字段的值时，选择字段也会更改。如何使此代码不运行两次，而是同时使用两个选择器？我尝试使用e.originalEvent语句仅在人工更改时运行，但这不会很好地工作，因为我有一些样式的下拉列表，它们将通过代码更改所选输入的值，因此代码不会运行。。

//refresh form ajax.
jQuery('#BookingForm input, #BookingForm select').change(function(e){
//jQuery('option:first-child', this).removeAttr('selected disabled'); //resetto il campo al change
var dati = jQuery('#BookingForm').serialize();
jQuery.ajax({
type: "POST",
url: "https://justfunviaggievento.it/wp-admin/admin-ajax.php",
data: { action: 'booking_data_fetch', data: dati },
success: function(data) {   
//refresh dropdown sistemazioni
if( !jQuery(e.target).hasClass('sistemazione')) {       
var sistemazione = jQuery(data).find('#BookingForm select[name="sistemazione"]').html();
jQuery('#BookingForm select[name="sistemazione"] option:not(:first-child)').remove();
jQuery('#BookingForm select[name="sistemazione"]').append(sistemazione);    
jQuery('select').niceSelect('update');
}
//refresh prezzo
var prezzo = jQuery(data).find('#preventivo-prezzo p:first-child').html();
jQuery('#preventivo-prezzo p:first-child').html( prezzo );
jQuery('#preventivo-prezzo').removeClass("price-animation");
setTimeout(function(){ jQuery('#preventivo-prezzo').addClass("price-animation") }, 100);
//refresh supplementi
var currentSupplemento = jQuery('#BookingForm .supplemento-monolocale').val();
var maxSupplementi = jQuery(data).find('#BookingForm .supplemento-monolocale').html();
jQuery('#BookingForm select.supplemento-monolocale').html( maxSupplementi ).val( currentSupplemento ).niceSelect('update');
//refresh intestazione e immagine
if( jQuery(e.target).hasClass('destinazione')) {
var intestazione = jQuery(data).find('.box-preventivo h2 span').html();
jQuery('.box-preventivo h2 span').html( intestazione );
setTimeout(function(){ jQuery('.box-preventivo h2 span').addClass("price-animation") }, 100);
setTimeout(function(){ jQuery('.box-preventivo h2 span').removeClass("price-animation") }, 1000);
jQuery('.pagina-preventivo .box-preventivo:first-child').animate({ opacity: 0 }, 100, function() {
// Animation complete.
jQuery(this).css('background','url(/wp-content/uploads/media/justfun-viaggi-evento-preventivo-' + intestazione + '-3.jpg) no-repeat center').animate({ opacity: 1 }, 50);
});
}
},
error: function() {
console.log('errore JS');
}
});
});

Answer 1

send2 = false;
//refresh form ajax.
jQuery('#BookingForm input').change(function(e){    
sendQuery(e);
send2 = true;
});
jQuery('#BookingForm select').change(function(e){
if(!send2){ sendQuery(e);}  
send2 = false;
});
function sendQuery(e){  
//jQuery('option:first-child', this).removeAttr('selected disabled'); //resetto il campo al change
var dati = jQuery('#BookingForm').serialize();
jQuery.ajax({
type: "POST",
url: "https://justfunviaggievento.it/wp-admin/admin-ajax.php",
data: { action: 'booking_data_fetch', data: dati },
success: function(data) {   
//refresh dropdown sistemazioni
if( !jQuery(e.target).hasClass('sistemazione')) {       
var sistemazione = jQuery(data).find('#BookingForm select[name="sistemazione"]').html();
jQuery('#BookingForm select[name="sistemazione"] option:not(:first-child)').remove();
jQuery('#BookingForm select[name="sistemazione"]').append(sistemazione);    
jQuery('select').niceSelect('update');
}
//refresh prezzo
var prezzo = jQuery(data).find('#preventivo-prezzo p:first-child').html();
jQuery('#preventivo-prezzo p:first-child').html( prezzo );
jQuery('#preventivo-prezzo').removeClass("price-animation");
setTimeout(function(){ jQuery('#preventivo-prezzo').addClass("price-animation") }, 100);
//refresh supplementi
var currentSupplemento = jQuery('#BookingForm .supplemento-monolocale').val();
var maxSupplementi = jQuery(data).find('#BookingForm .supplemento-monolocale').html();
jQuery('#BookingForm select.supplemento-monolocale').html( maxSupplementi ).val( currentSupplemento ).niceSelect('update');
//refresh intestazione e immagine
if( jQuery(e.target).hasClass('destinazione')) {
var intestazione = jQuery(data).find('.box-preventivo h2 span').html();
jQuery('.box-preventivo h2 span').html( intestazione );
setTimeout(function(){ jQuery('.box-preventivo h2 span').addClass("price-animation") }, 100);
setTimeout(function(){ jQuery('.box-preventivo h2 span').removeClass("price-animation") }, 1000);
jQuery('.pagina-preventivo .box-preventivo:first-child').animate({ opacity: 0 }, 100, function() {
// Animation complete.
jQuery(this).css('background','url(/wp-content/uploads/media/justfun-viaggi-evento-preventivo-' + intestazione + '-3.jpg) no-repeat center').animate({ opacity: 1 }, 50);
});
}
},
error: function() {
console.log('errore JS');
}
});
}

Answer 2

您要做的是在请求进行时维护一些状态。请确保特定于此上下文，因此，如果您只想限制特定用例的多个请求，请相应地命名和管理此状态。这意味着您需要多个状态变量(如requestInProgress(用于应用程序的不同表单字段和页面；这不是一个全局请求限制器

var requestInProgress = false;
function sendRequest() {
if (requestInProgress) return; // no action

// otherwise, run request logic
requestInProgress = true;
// ... your code
jQuery.ajax({
// make sure to set the boolean to false in both the 
// success and error cases
success: function(data) {
requestInProgress = false;
// ... your code
},
error: function(data) {
requestInProgress = false;
// ... your code
},
});
}

Answer 3

好的，我用这种方式在函数内外绑定和取消绑定来解决这个问题：

//refresh form ajax.
function ajax(e){
//UNBIND AFTER CHANGE
jQuery('#BookingForm input, #BookingForm select').unbind('change');
var dati = jQuery('#BookingForm').serialize();
jQuery.ajax({
type: "POST",
url: "https://justfunviaggievento.it/wp-admin/admin-ajax.php",
data: { action: 'booking_data_fetch', data: dati },
success: function(data) {
//refresh dropdown sistemazioni
if( !jQuery(e.target).hasClass('sistemazione') && !jQuery(e.target).hasClass('numero-passeggeri') ) {       
var sistemazione = jQuery(data).find('#BookingForm select[name="sistemazione"]').html();
jQuery('#BookingForm select[name="sistemazione"] option').remove();
jQuery('#BookingForm select[name="sistemazione"]').append(sistemazione);    
jQuery('select').niceSelect('update');
}
//refresh supplementi
var currentSupplemento = jQuery('#BookingForm .supplemento-monolocale').val();
var maxSupplementi = jQuery(data).find('#BookingForm .supplemento-monolocale').html();
jQuery('#BookingForm select.supplemento-monolocale').html( maxSupplementi ).val( currentSupplemento ).niceSelect('update');
//refresh prezzo
var prezzo = jQuery(data).find('#preventivo-prezzo p:first-child').html();
jQuery('#preventivo-prezzo p:first-child').html( prezzo );
jQuery('#preventivo-prezzo').removeClass("price-animation");
setTimeout(function(){ jQuery('#preventivo-prezzo').addClass("price-animation") }, 100);
//REBIND AFTER DOING STUFFS
jQuery('#BookingForm input, #BookingForm select').bind('change', function(e){
ajax(e);
});
},
error: function() {
console.log('errore JS');
}
});
}
//INITIAL BIND TO CHANGE
jQuery('#BookingForm input, #BookingForm select').bind('change', function(e){
ajax(e);
});