如何确保一行JQuery在另一行之前运行

Question

当用户单击按钮时，我想显示一些东西，然后执行ajax请求，然后隐藏该东西。 但是我无法做到这一点。 我的代码：

  $('div').on('click', '.button', function(e){    

    $('.spinner').show();   

    $.ajax({
      url: '/url.php', 
      // some other params
    });

    $('.spinner').hide();   
  });   

我不能使它工作。 div只是不显示，但是ajax通过了。 有时，ajax会花费几秒钟的时间，所以并不是立即显示和隐藏。 怎么会这样 在运行ajax请求之前，如何强制div出现？

Answer 1

使用异步代码，您将无法再“线性地”思考。 异步操作不会“等待”完成，只是开始，然后执行下一个操作。 您必须使用回调或Promise，而不是当前的方法。

例如，在您的情况下， $.ajax方法返回一个对象，该对象的方法已done （或者您可以使用success配置方法），一旦来自服务器的响应可用，就会调用该对象：

$('div').on('click', '.button', function (e) {

    $('.spinner').show();

    $.ajax({
        url: '/url.php',
        // some other params
    })
    .done(function() {
        $('.spinner').hide();
    });

});

Answer 2

您可以制作一些通用的东西：

  $(document).ajaxStart(function () {
            $('.spinner').show();
        });

        $(document).ajaxStop(function () {
            $('.spinner').hide();
        });

只需在您的layout或Master Page某处添加此代码，无论何时发出任何ajax request ，它都将加载此微调器。