如何在使用AJAX时控制JavaScript函数的顺序

Question

我的设置

function ajaxLoadSth(value, attribute) {

    $.post( url, value, function(response) {

        // interpreting the response
        var foobar = $('#foo') + $('.bar').find('.sth');

        // print interpretation into DOM
        container.append(foobar);

        // do some funky stuff
        doSomeFooWithDom();
        checkSomeBarHere();
        updateSomeValuesThere();

        // now call the function again with different values 

        // THIS IS WHAT MY QUESTION REFERS TO **************
        if ( true ) {
            ajaxLoadSth(newValue, newAttribute);
        }
    });
}

我的问题

函数不能在 //做一些时髦的东西之前调用 -part，一些DOM操作已经完成执行 - 但它确实强>

我的问题

• 为什么？是因为那些“时髦的东西”位于外部功能中吗？在同步执行方面，这有关系吗？
• 如何让“自己调用”等到上面的内容结束？

我已经考虑过通过设置全局变量和触发处理程序来告诉他们已做好准备的功能。每次触发处理程序时，如果所有变量都设置正确并且然后执行函数调用，则函数检查。那怎么样？

非常感谢您提前的时间！

Answer 1

尝试回调 例如

doSomeFunkyStuff(callback){
//DO SOME FUNKY
  callback();
}

function ajaxLoadSth(value, attribute) {

    $.post( url, value, function(response) {

        // interpreting the response
        var foobar = $('#foo') + $('.bar').find('.sth');

        // print interpretation into DOM
        container.append(foobar);

        // do some funky stuff
        doSomeFunkyStuff(function(){
           ajaxLoadSth(newValue, newAttribute);
        }

    });
}

Answer 2

1. 功能在外部的事实无关紧要。它们将同步执行：如果您使用DOM检查器并在这些函数中放置断点，您应该会发现它们将在AJaX调用召回之前按顺序执行。

2. 我认为这里的关键是“等到上面的内容完成” - 这些函数将按照你调用的顺序执行，但'完成'的结果可能是异步的。

我写了一个插件来处理这种名为Pendant.js的东西。这个想法是你想要推迟（a）基于各种依赖的给定函数的执行：dependency是你传递给Pendant的函数，它获得一个额外的参数，resolve，这是一个在满足依赖关系时可以调用的函数。然后你将递归调用作为dependant传递，只有当所有Pendant的依赖关系都已解决时才会执行。

jQuery也实现了'Promises'开箱即用，这是我想要的，但是使用一种适合XHR的语言让我很不舒服。话虽如此，它可能更强大（并且记录良好！），所以你应该看看它。