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

使用异步代码，您无法线性思考＆＃34;了。异步操作不会等待＆＃34;完成后，刚刚启动，然后执行下一个操作。而不是你当前的方法，你将不得不使用回调或承诺。

例如，在您的情况下，$.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，就会加载此微调器。

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

2 个答案: