ExtJs：ajax调用中的代码执行顺序是什么？答案

【问题标题】：ExtJs: What will be the sequence of code execution in ajax call?ExtJs：ajax调用中的代码执行顺序是什么？
【发布时间】：2012-05-01 13:06:08
【问题描述】：

鉴于 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()？如果是，那么在什么条件下？

提前感谢您的帮助。

【问题讨论】：

标签： javascript ajax extjs asynchronous single-threaded

【解决方案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 的调用再次尝试。

【讨论】：

如果C函数需要很长时间怎么办？如果 Ajax 调用只需要很少的时间怎么办？
没关系。发出 Ajax 请求至少有一些延迟，而 C&D 方法将始终同步执行，因此在完成之前不会释放“锁”。
换句话说：B被放入一个新的调用栈中，而C和D与A在同一个栈中。每个栈总是在下一个开始之前被完全处理。
@EvanTrimboli：我完全同意你的看法。进行了类似的测试并得到了相同的结果。感谢您的回答。

【解决方案2】：

一个 {B} C {B} D {B}
b 可以在所有标记为 {b} 的位置执行。但只会执行一次。
编辑：-
没有 javascript 不是多线程语言。所以维护要执行的代码的queue。所以当它到达funcC时它开始执行FuncC然后在ii返回后寻找队列中要执行的下一个函数可能是funcB（如果ajax请求完成）所以funcB只能被执行在两个函数调用之间

【讨论】：

感谢帕夫的帖子。那么这一切都取决于Ajax请求的完成吗？如果是这种情况，那么执行是否会突然跳转到 ajax 函数的成功并开始执行 FuncB();一旦ajax完成？
@ParvSharma：同意埃文。 B() 只有在 C() 和 D() 完成后才会执行。

【解决方案3】：

请注意，javascript 代码从上到下运行。因此，在这种情况下，您的代码执行将从funcA() 开始并在funcD() 结束，但funcB() 可以随时调用，因为这完全取决于ajax.php 返回响应的时间。

【讨论】：

B() 将始终仅在最后执行，并且在任何情况下都不会在 C() 或 D() 之前执行。不过感谢您的时间。