如何在使用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异步

回答

相关问题