javascript - 如何确保 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();
    });

});