如何確保一行JQuery在另一行之前運行

Question

當用戶單擊某個按鈕時，我想顯示一些內容，然後執行ajax請求，然後隱藏該事件。但我無法做到這一點。我的代碼：

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

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

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

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

我不能讓它工作。該div只是不顯示，但阿賈克斯經歷了。有時候ajax會花費幾秒鐘的時間，所以並不是它會立即顯示和隱藏。這是爲什麼？如何在運行ajax請求之前強制div的外觀？

Answer 1

使用異步代碼，您再也不能思考「線性」。異步操作不會「等待」完成，只是啓動並執行下一個操作。而不是你目前的做法，你將不得不使用回調或承諾。

例如像這樣在你的情況，$.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。