Begrenzen Sie die ajaxStart-Funktion auf nur 1 von 2 Ajax-Funktionen

Question

Ich habe eine loading.gif, die jedes Mal gestartet wird, wenn der Benutzer eine AJAX-Suche durchführt. Ich habe jedoch einige Suchfelder, in denen automatisch Vorschläge angezeigt werden, während der Benutzer eingibt, der ebenfalls von AJAX unterstützt wird.

Jetzt erscheint meine loading.gif auf der Benutzersuche sowie die Suchvorschläge während der Eingabe. Wie beschränke ich meine Funktion, die anzeigt, dass loading.gif nur dann angezeigt wird, wenn es sich um eine Benutzer-AJAX-Suche handelt und nicht um eine Suchvorschlag-Eingabe während der AJAX-Suche?

Dies ist meine Funktion:

$(document).ajaxStart(function() { 
    $(".se-pre-con").fadeIn("fast"); 
}).ajaxStop(function() { 
    $(".se-pre-con").fadeOut("fast"); 
}); 

Answer 1

Wie binden Sie es mit Bedingung, wie wenn Benutzer noch auf der Sucheingabe ist, dann zeigen Sie nicht die loading.gif sonst, wenn der Benutzer aus der Sucheingabe oder ersten Kontakt auf der Sucheingabe ist, dann zeigen Sie die loading.gif (siehe unten)

zuerst die globale Variable

var input_focus = false; 

und dann, wenn der angegebene Eingang Fokus

$("#specified_input").focus(function(){ 
    //set the variable named 'input_focus' to true to reject the showing of the loader (loading.gif) or hide it. 
    input_focus = true; 
}).blur(function(){ 
    //when the specified input lose it focus then set the variable 'input_focus' to false so that the loader (loading.gif) is allowed to show 
    input_focus = false; 
}); 

$.ajax({ 
    url : 'my-url', 
    type : 'post', 
    data : {}, 
    beforeSend : function(){ 
     //check if input is on focus 
     if(input_focus !== true){ 
      //show the loading.gif, assume that #loader 
      $("#loader").show(); 
     }else{ 
      //hide the loading.gif, assume that #loader 
      $("#loader").hide(); 
     } 
    }, 
    complete : function(){ 
     //when the ajax request is complete 
    }, 
    success : function(response){ 
     //the response function 
    } 
}); 

Answer 2

ich es durch eine der folgenden angehen würde:

1) wie showLoadingAnimation eine globale Variable hinzufügen und legen Sie es auf wahr oder falsch in Abhängigkeit von der brauchen. Innerhalb Ihres ajaxStart und ajaxStop wie folgt vor:

$(document).ajaxStart(function() { 
    if (showLoadingAnimation) $(".se-pre-con").fadeIn("fast"); 
}).ajaxStop(function() { 
    if (showLoadingAnimation) $(".se-pre-con").fadeOut("fast"); 
}); 

2) Statt die jQuery globalen Einstellungen ändern, Wickeln Sie das jQuery-Methode mit Ihrem eigenen Methode:

//only listen to ajaxStop event so that we can hide the animation 
$(document).ajaxStop(function() { 
    $(".se-pre-con").fadeOut("fast"); 
}); 

function myAjax(params, showAnimation) { 
    if (showAnimation) $(".se-pre-con").fadeIn("fast"); 
    $.ajax(params); 
} 

//in your code you instead of calling $.ajax({...}) simply use `myAjax({...})` 

Hoffnung, das hilft.