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

How can I ensure one line of JQuery run before another

本文关键字：一行 运行 何确保 确保 JQuery      更新时间：2023-09-26

当用户单击按钮时，我想显示一些内容，然后执行ajax请求，然后隐藏该内容。但我没办法做到。我的代码：

  $('div').on('click', '.button', function(e){    
    $('.spinner').show();   
    $.ajax({
      url: '/url.php', 
      // some other params
    });
    $('.spinner').hide();   
  });

我做不到。div没有显示，但是ajax通过了。有时ajax需要几秒钟的时间，所以它并不是立即显示和隐藏的。为什么是这样？如何在运行ajax请求之前强制显示div？

使用异步代码，您不能再"线性"思考了。异步操作不会"等待"完成，只是启动，然后执行下一个操作。你将不得不使用回调或承诺来代替你目前的方法。

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

$('div').on('click', '.button', function (e) {
    $('.spinner').show();
    $.ajax({
        url: '/url.php',
        // some other params
    })
    .done(function() {
        $('.spinner').hide();
    });
});

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

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

只要在layout或Master Page中的某个位置添加此代码，无论何时生成任何ajax request，它都会加载此微调器。

相关文章：