javascript - ExtJs:ajax 调用中的代码执行顺序是什么？

Question

鉴于 Javascript 是单线程语言，ExtJs 中以下代码的执行顺序是什么？

FuncA();

Ext.Ajax.request({
    url: 'ajax.php',
    params: {
        id: 1
    },
    success: function(response){

        FuncB();
    }
});

FuncC();

FuncD();

这里函数的执行顺序是A-C-D-B吗？

或者

是否有可能在 FuncC() 或 FuncD() 之前调用 FuncB()？如果是，那么在什么条件下？

在此先感谢您的帮助。

Answer 1

除非 ajax 请求是同步的，否则顺序将始终为 A-C-D-B，但实际上不建议使用它，因为它会导致 UI 挂起。

例如，试试这个(最好在 Chrome 中)

function f1() {
    var s = '';
    for (var i = 0; i < 10000000; ++i) {
        s += 'a';
    }
}

function f2() {
    var s = '';
    for (var i = 0; i < 10000000; ++i) {
        s += 'b';
    }
}

Ext.require('Ext.Ajax');

Ext.onReady(function() {

    var d;
    Ext.Ajax.request({
        url: 'data.json',
        success: function(){
            console.log('finished');
        }
    });

    d = new Date();
    f1();
    console.log(new Date() - d, 'f1 done');
    d = new Date();
    f2();
    console.log(new Date() - d, 'f2 done');

});

您会看到，即使运行代码大约需要 1 秒，ajax 请求总是最后触发，即使请求本身只需要大约 7 毫秒(它是一个本地框)。然后通过注释掉对 f1/f2 的调用再试一次。