如何确保函数中的jQuery代码在其他函数之前执行

时间:2014-12-12 17:58:30

标签: javascript jquery ajax onchange

我在对我的服务器执行AJAX调用的函数中遇到了非常奇怪的行为。

以下代码取自我的jQuery脚本。下面显示的2个函数在我的脚本中按此顺序显示。如果您按照警报进行操作,则会记录整个脚本的处理顺序。

对于我的脚本进程来说,奇怪的,无法解释的,并且坦率地说有问题的是$.ajax()调用在我需要它时不会被执行。它最后执行。

我的脚本编码有问题吗?

$(document).ready(function() {
  $(window).load(function() {

    $('#agentID').change(function() {
    alert('This alert displays on screen First');
      $.ajax({
        url: '/scripts/ajaxAgent.php',
        type: 'GET',
        dataType: 'html',
        data: 'lookup=' + $('#agentID').val(),
        success: function(data) {
          if (data == 1) {
    alert('Oddly and incorrectly, this alert displays on screen Third');
            $('.visibility').show();
            $('#resTypeID').closest('div').removeClass("optional");
            $('#resTypeID').closest('div').addClass("required");
          }
          else {
    alert('Oddly and incorrectly, this alert displays on screen Third');
            $('.visibility').hide();
            $('#resTypeID').closest('div').removeClass("required");
            $('#resTypeID').closest('div').addClass("optional");
          }
          resTypeVisibilityHandler = data; // this var is set to global at top of this script
        }, // end success
        error: function() {
          alert('An error occurred in processing.');
        } // end error
      }); // end .ajax()
    }); // end agentID .change()

    $('#agentID').focus();
    $(document).on('change', '.visibilityControl', function(event) {
    alert('This alert displays on screen Second');
    // ...
    }); // end .on('change') visibility control

  }); // end .load()
}); // end .ready()

@pep有我独特问题的答案。出于某种原因,SO正在阻止新的答案或错误的答案。这是解决方案:

“因此,您可以简单地将脚本完成时需要执行的所有代码包装到函数中。然后,在AJAX成功结束时,您可以调用该函数并在此时时间将是正确的,因为代码将在您的示例中按预期执行第三。“

他得到了......这就是解决方法!

2014-12-12 @ 13:15(GMT-5)向 SO领主请求重新打开此问题,以便我能够正确接受正确答案。

2 个答案:

答案 0 :(得分:1)

Ajax使用异步方式获取数据。现在这意味着一旦启动数据请求,页面将继续运行其余的javascript (如果可用),并在收到数据后运行ajax 的承诺。所以这一切都取决于数据从ajax URL返回的时间。在每种情况下,当浏览器中的脚本几乎立即运行时,ajax promises将最后运行,但从服务器获取数据需要更多时间。

答案 1 :(得分:1)

这是预期的行为。 Javascript是单线程的。像Ajax这样的函数需要一些时间来执行请求和响应之间的延迟。如果javascripts等待结果出现,那么它会阻止单个线程,并且任何javascript代码都无法运行直到响应到来。

为了摆脱这种情况,javascripts使用异步非阻塞事件机制。 Ajax是一个异步函数。由于AJAX调用需要时间来获取结果,因此您将在响应到来之后传递要执行的函数。 Javascript不会等到请求到来并且js继续执行Ajax函数下面的代码,直到响应到来。当响应到来时,js执行你发送的函数(回调)到Ajax函数。这是延迟第三次警报的原因..