3

简而言之，如何让 alert(1) 先运行：

    $.post('example.php', function() {
        alert(1);
    })
    alert(2);
    alert(3);
    alert(4);

但是 jquery ajax 调用似乎以异步方法运行。因此 JavaScript 将首先运行下面的所有内容，从 alert(2) 到 alert(4)，然后返回到 post 方法，alert(1)。

当然我可以把代码放在ajax函数中，但是当我有几十个函数时，这没有任何意义，那么我必须将代码添加到所有函数中。

    $.post('example.php', function() {
        alert(1);
        example();
    })

    function example() {
        alert(2);
        alert(3);
        alert(4);
    }

我想从 ajax 调用中获取一些 json 数据，然后再使用它。那么有什么聪明的解决方案吗？

2021-08-25

8 年后，async / await的引入很棒，我不再使用 jquery，所以我没有测试代码

await Promise.resolve($.post('example.php', function() {
    alert(1);
    example();
}));

alert(2);
alert(3);
alert(4);
4

4 回答 4

2

在 jQuery 中，我只是更喜欢使用 $.when 和 $.then 这很容易做到，并且使用它的代码更具可读性。

function CatchTheFish(){
console.log('we are catching the fish');
}
function EattheFish(){
console.log('now time to eat this fish');
}
$.when ( CatchTheFish() ).then( EattheFish() );

此代码适用于最新版本的 jQuery 1.9.1

于 2013-05-20T04:00:33.800 回答
2

“当然我可以把代码放在ajax函数中，但是当我有几十个函数时这没有意义，那么我必须将代码添加到所有函数中。”

有很多模式可以让这更容易，但如果你说可能需要几十个函数调用这个帖子，你可以把帖子放在一个函数中，让函数接收回调。

function myPost(callback) {
    $.post('example.php', function(data) {
        alert(1);
        callback(data);
    })
}


// These are your "dozens of functions"
function a2() { alert(2); }
function a3() { alert(3); }
function a4() { alert(4); }


// These would be at various places in your application
myPost(a1);
myPost(a2);
myPost(a3);

最终，最好的方法取决于你所说的“几十个函数”是什么意思，但你肯定不需要做你似乎暗示的硬编码。

将函数作为参数传递通常是可行的方法，但如果需要，还有其他模式可以设置队列。

于 2013-05-18T23:33:09.903 回答
0

alerts 按该顺序触发的原因是因为 AJAX 中的“ A ”代表异步。

以下是代码的执行方式：

  • 该post方法向服务器发送请求，第二个参数是一个回调函数，一旦服务器返回请求，稍后将调用该回调函数。
  • 然后在调用后继续执行下一行代码post，触发alert(2);
  • 然后下一行触发alert(3);
  • 然后下一行触发alert(4);
  • 此代码块已完成运行，因此控制返回到事件循环
  • 一旦服务器返回 Ajax 请求，回调函数就被称为触发alert(1)

解决此问题的最佳方法可能是将所有代码移动到回调中，这样它只会在请求返回后运行。

$.post('example.php', function() {
    alert(1);
    alert(2);
    alert(3);
    alert(4);
})

可能不需要将它放在另一个函数中并按照问题末尾的建议调用它。

我会避免“同步”Ajax 请求，除了作为一个矛盾修饰符之外，它们与使用 Ajax 的整个目的背道而驰。使用 Ajax 应该使您的应用程序更具响应性，而使用同步请求则相反，如果请求超时或从服务器返回需要很长时间，它可能会导致浏览器锁定。

于 2013-05-18T23:59:03.420 回答
0

这是使用 jQuery 的自定义事件的替代方法。它基本上就像其他非同步建议的答案一样，只是看起来略有不同，可以帮助您保持我们的代码整洁......

使用对象将自定义事件绑定到。on使用jQuery 的方法在该对象上绑定一个或多个处理程序。在异步函数结束时触发自定义事件，jQuery 将为您完成剩下的工作。

例子：

(function($){
    var fakeAsync = {};
    function fakeAsyncFunction( ) {
        alert(1);
        $(fakeAsync).trigger('customDone');
    }

    function a( ) {
        alert(2);
    }
    function b( ) {
        alert(3);
    }
    function c( ) {
        alert(4);
    }

    window.setTimeout(fakeAsyncFunction, 1000);

    $(fakeAsync).on('customDone', a)
        .on('customDone', b)
        .on('customDone', c);
})(jQuery);

工作小提琴。

于 2013-05-19T00:02:20.473 回答