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

我的问题是，当我设置 $.ajax async to false 时，不显示警告框。当 async 设置为 true 时，一切正常。我知道 async: false 是什么意思。我在我的表单中使用它来提交数据。当数据提交正在进行时，我想显示和警告框，其中包含 "Operation in progress..." 之类的内容，并阻止任何用户输入（鼠标单击、键盘回车键等）。在我的应用程序的某些地方，这在其他地方不起作用，我不明白为什么。有什么方法可以确保在实际 ajax 调用之前进行 UI 更改？

Answer 1

来自 bugs.jquery.com :

If I show a message (say..."Loading") BEFORE I make the AJAX call, I'd expect it to display.

The code before the call is running, but that doesn't mean you will see the result immediately. If the call is truly and completely synchronous, the window update might not happen until after the $.ajax call completes. It wouldn't be any different than:

如果您真的想使用 async:false ajax 那么您可以尝试使用 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);

jAlert 不显示 jQuery ajax 同步

jAlert doesn't show up with jQuery ajax sync

jquery

ajax

alert

synchronous