如何在使用jQuery事件時避免ajax異步

我有一個帶有ajax調用（填充其他一些輸入字段）模糊和按鈕與點擊事件（一些點擊事件設置輸入字段爲空字符串）的輸入字段。例如，如何在使用jQuery事件時避免ajax異步

$("#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 
      });

當該輸入場被聚焦，然後上的任何按鈕用戶點擊，則觸發事件模糊，當然，之後適當點擊事件。如果我不使用async：false，在點擊事件處理完成後，ajax將填充這些輸入字段，其他輸入將被填充而不是空的。

閱讀有關async：false應該如何避免總是，我需要一種方式讓我的點擊事件等到ajax完成，如果在那個時候有ajax調用。

來源

2017-10-09 Queen Juliet

首先一個在AJAX代表了異步。你到底想做什麼？ – Walk

你需要*擁抱*異步，而不是與它戰鬥。這可能意味着重新考慮事件如何一起工作，或者可能在處理時禁用按鈕，或者這可能意味着您需要建立一個「請稍等」的樣式塊。 –

處理ajax時禁用按鈕將導致點擊事件不能觸發。我真的需要用戶能夠在input_field1填充後立即點擊按鈕。 –

您需要對案例進行併發檢查。在你的blur行動;檢查並設置一個值以防止重新進入其他呼叫。

也在ajax請求期間，您需要防止單擊按鈕。

還有一件事，如果在您的輸入字段模糊之後，用戶會重新聚焦並重新聚焦輸入內容？在這種情況下，你的動作將被觸發兩次。

因此，您需要處理併發性。也有一些JavaScript庫來處理併發，你可以使用它們或由你自己處理。

反正來處理你的情況，這裏是一個示例代碼：

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

來源

2017-10-09 10:52:19 ykaragol

謝謝你的回答。如果在輸入字段模糊之後，用戶重新聚焦和重新聚焦輸入不會導致問題，因爲輸入將具有相同的值，所以新的Ajax請求不會成爲問題。在你的代碼中沒有啓用按鈕，並且如果input_field1被聚焦，用戶不可能點擊按鈕。在我對自己的問題的評論中，我解釋瞭如何使用mousedown事件來解決這個衝突，該事件以某種方式爲您的simillar邏輯使用：在按鈕的mousedown上將變量設置爲true，但如果存在或不存在ajax調用。 –

當輸入焦點時，它不能防止點擊按鈕。它正在阻止ajax請求開始之前單擊該按鈕，並在ajax請求完成後立即重新啓用該按鈕。 – ykaragol

如何在使用jQuery事件時避免ajax異步

回答

相關問題