Question

我有一个MVC应用程序，我在文本框模糊功能上调用jquery post方法。问题是表单有很多输入字段，并且在每个输入字段上模糊调用相同的ajax方法，如果用户非常快速地在不同的文本框中单击和输出，则ajax方法调用两次，导致错误的结果。

这是一个例子

    Flight 1
    Airline     Flight #    Class         Date
S1  TextBox1    TextBox2    TextBox3      TextBox4 
S2  TextBox1    TextBox2    TextBox3      TextBox4 
S3  TextBox1    TextBox2    TextBox3      TextBox4

我厌倦了解决这个问题的一个解决方案是在调用ajex时禁用所有输入文件

function Submit() {
     $('input').attr("disabled", "disabled");
     $.post("/ItineraryBuilder/GetFlightData", { opportunityId: oppID}, function (data) 
     {
          $("#DivResult").html(data);
          $('input').removeAttr("disabled");
     }
}

这会禁用所有输入字段，并限制用户经常从文本框中输入，这反过来又不会一次又一次地调用Ajax。但是一旦禁用输入字段，焦点也会丢失，并且在这种情况下很难使用TAB。

那么有什么方法可以锁定ajax调用或Controller / Action一段时间，直到一个动作正在进行另一个动作不能启动，或者其他更好的方法来执行此操作？

希望我明白我的观点。

Answer 1

改为使用叠加层。

我创建了一个名为ElementOverlay的小插件。您可以像这样使用它：

function Submit() {
     $('#yourForm').elementOverlay();

     $('input').attr("disabled", "disabled");
     $.post("/ItineraryBuilder/GetFlightData", { opportunityId: oppID}, function (data) 
     {
          $('#yourForm').elementOverlay('destroy');

          $("#DivResult").html(data);
          $('input').removeAttr("disabled");
     }
}

这只会覆盖表单，因此用户可以使用页面的其余部分。

脚本：https://github.com/jgauffin/griffin.jquery.tools/blob/master/Source/jquery.griffin.elementoverlay.js（点击“原始”按钮下载）

Answer 2

if($.active){ 
  //there's an ajax function running
}else{ 
  //there's no ajax function running
}

Answer 3

如果您喜欢自己的解决方案，除了丢失的焦点，您可以执行以下操作。

我使用复杂的“each”函数来确定下一个输入，因为“next（）”可能不起作用，因为您似乎将表单放在表中。顺便说一句，你错过了一个结束“）;”在你的电话会议上。

    $('input').on('blur', function(){
      $('input').attr('disabled', true);
      $(this).addClass('last-edited');
      var tagnext = false;
      $('input').each(function(){
          if(tagnext){
             $(this).addClass('next-focus');
             tagnext = false;
          }
          if($(this).hasClass('last-edited')){
             $(this).removeClass('last-edited');
             tagnext = true;
          }
      });
      Submit();           
    });



   function Submit(){
      $.post('/ItineraryBuilder/GetFlightData', { opportunityId: oppID}, function (data) 
      {
         $('#DivResult').html(data);
         $('.next-focus').focus();
         $('input').removeAttr('disabled');
      });
   }

在动作正在进行时锁定动作

3 个答案: