Question

我有一个带有ajax调用的输入字段（填充一些其他输入字段）on blur和带有click事件的按钮（一些click事件将输入字段设置为空字符串）。例如，

 $("#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调用。

Answer 1

您需要对案例进行并发检查。在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
});

如何在使用jquery事件时避免ajax异步

1 个答案: