jAlert不顯示與jQuery ajax同步

Question

我正在使用jQuery警報對話框插件（http://abeautifulsite.net/，版本1.1）和jQuery v1.6.1。測試IE 11和Chrome 41.0.x版本。有一個測試代碼：

var t = (new Date()).getTime(); 
    jAlert('Test message'); 
    console.log('Alert displayed, d=' + ((new Date()).getTime() - t)); 
    console.log(' Alert visible: ' + $('#popup_panel').is(":visible") + ', Overlay visible: ' + $('#popup_overlay').is(":visible") + ', d=' + ((new Date()).getTime() - t)); 

    $.ajax({ 
     url: 'http://ip.jsontest.com/', 
     data: { }, 
     type: 'GET', 
     async: false, 
     complete: function() { 
      console.log('Ajax complete, d=' + ((new Date()).getTime() - t)); 
      $.alerts._hide(); 
      console.log(' Alert visible: ' + $('#popup_panel').is(":visible") + ', Overlay visible: ' + $('#popup_overlay').is(":visible") + ', d=' + ((new Date()).getTime() - t)); 
     } 
    }); 

和控制檯輸出：

Alert displayed, d=8 
    Alert visible: true, Overlay visible: true, d=9 
Ajax complete, d=276 
    Alert visible: false, Overlay visible: false, d=281 

我的問題是，當我設置$就異步假警報框將不顯示。一切工作正常當異步設置爲true。我知道什麼是異步：錯誤的意思。我用它來填寫數據。當數據提交正在進行中時，我想要顯示和警告框，例如「正在進行操作...」並阻止任何用戶輸入（鼠標點擊，鍵盤Enter鍵等）。在我的應用程序的某些地方，這在其他作品中不起作用，我不知道爲什麼。 有沒有什麼方法可以確保在真正的Ajax調用之前進行UI更改？

Answer 1

從bugs.jquery.com：

如果我表現出的消息（說...「加載」）之前，我做到了AJAX調用，我 希望它顯示。

通話之前的代碼正在運行，但這並不意味着您將立即查看結果。如果該呼叫是真正完全同步的，則在$ .ajax 呼叫完成之後，窗口更新可能不會發生。它不會比任何不同：

如果你真的想使用async:false阿賈克斯，那麼你可以嘗試用setTimeout的扭曲它讓瀏覽器之前，它執行的代碼，看到瀏覽器凍結之前的變化。

var t = (new Date()).getTime(); 
    jAlert('Test message'); 
    console.log('Alert displayed, d=' + ((new Date()).getTime() - t)); 
    console.log(' Alert visible: ' + $('#popup_panel').is(":visible") + ', Overlay visible: ' + $('#popup_overlay').is(":visible") + ', d=' + ((new Date()).getTime() - t)); 

// do async call 
setTimeout(function() { 
    $.ajax({ 
     url: 'http://ip.jsontest.com/', 
     data: { }, 
     type: 'GET', 
     async: false, 
     complete: function() { 
      console.log('Ajax complete, d=' + ((new Date()).getTime() - t)); 
      $.alerts._hide(); 
      console.log(' Alert visible: ' + $('#popup_panel').is(":visible") + ', Overlay visible: ' + $('#popup_overlay').is(":visible") + ', d=' + ((new Date()).getTime() - t)); 
     } 
    }); 
}, 20);