So vermeiden Sie Ajax Async bei Verwendung von Jquery-Ereignissen

Question

Ich habe ein Eingabefeld mit Ajax-Aufruf (füllen einige andere Eingabefelder) auf Blur und Schaltflächen mit Click-Ereignisse (einige der Click-Ereignisse setzen Eingabefelder auf eine leere Zeichenfolge). Zum Beispiel

$("#input_field1").on('blur', function() { 
       $.ajax({ 
        //async:false, 
        method: "GET", 
        url: "my_ajax.php", 
        cache: false, 
        dataType: "json", 
        data: { data1: $("#input_field1").val()}, 
        success: function(result){ 
         $("#some_other_input").val(result.data2); 
        } 
       }) 
      }); 
$("#button1").on('click', function() { 
       $("#input_field1").attr("readonly", true); 
       var form = $("#my_form"); 
       form.validate().resetForm(); 
       form[0].reset();//form contains #some_other_input 
      }); 

Wenn das Eingabefeld fokussiert wird und dann Benutzer klickt auf eine beliebige Taste, Unschärfe-Ereignis ausgelöst und natürlich nach dem entsprechenden Click-Ereignis. Wenn ich async: false nicht verwende, füllt ajax diese Eingabefelder, nachdem das click -Ereignis verarbeitet wurde und andere Eingaben gefüllt werden, anstatt leer zu sein.

Lesen über async: false sollte immer vermieden werden, ich brauche einen Weg für meine Klickereignisse zu warten, bis Ajax fertig ist, wenn es in diesem Moment einen Ajax-Aufruf gibt.

Answer 1

Sie benötigen eine Parallelitätsprüfung für Ihre Fälle. Auf Ihrer blur Aktion; Überprüfen und legen Sie einen Wert fest, um zu verhindern, dass die anderen Anrufe erneut eingegeben werden.

Auch während einer Ajax-Anfrage müssen Sie verhindern, dass Sie auf die Schaltflächen klicken.

Noch eine Sache: Was passiert, wenn der Benutzer nach dem Verwischen des Eingabefeldes die Eingabe neu fokussiert und neu fokussiert? In diesem Fall wird Ihre Aktion zweimal ausgelöst.

Als Ergebnis müssen Sie mit Nebenläufigkeit umgehen. Es gibt auch einige Javascript-Bibliotheken, um die Parallelität zu behandeln. Sie können sie entweder verwenden oder selbst behandeln.

Wie auch immer Ihren Fall zu behandeln, hier ist ein Beispielcode:

let hasCall = false; 

$("#input_field1").on('blur', function() { 
    if(hasCall){ 
    return; //there is an active call... 
    }else{ 
    hasCall = true; 
    $("#button1").prop('disabled', true);//prevent clicking on button 
    } 
    $.ajax({ 
    //async:false, 
    method: "GET", 
    url: "my_ajax.php", 
    cache: false, 
    dataType: "json", 
    data: { data1: $("#input_field1").val()}, 
    success: function(result){ 
     $("#some_other_input").val(result.data2); 
    } 
    }).always(()=>{ 
     //reset the state: 
     hasCall=false; 
    $("#button1").prop('disabled', false); 
    }); 
}); 
$("#button1").on('click', function() { 
    $("#input_field1").attr("readonly", true); 
    var form = $("#my_form"); 
    form.validate().resetForm(); 
    form[0].reset();//form contains #some_other_input 
});