jQuery $.ajax 上次成功触发 [重复]

Question

我有以下 Javascript，它返回的结果不符合我的预期。

function getCurrentItems(id){
    alert("2");
    $.ajax({
        url: "somePHPurlthatspitsoutajsonencodedArray.php",
        type: "POST",
        dataType: "json'",
        data: {id:id},
        success: function(data){
            alert("3");
        }
    });
    alert("4");
}

$(document).on('click', '.eventClass', function(e){
    alert("1");
    var id = "someID";
    var results = getCurrentItems(id);
    alert("5");
});

我想我会按 1、2、3、4、5 的顺序收到警报。

相反，我按 1、2、4、5、3 的顺序获取它们。

我只是不明白为什么成功警报 (5) 会最后触发？

Answer 1

AJAX 是异步 JavaScript 和 XML 的缩写。异步是这里的关键词。我会用一个寓言来解释异步。

假设您正在手动洗碗。这样做时你不能做任何其他事情，所以它是同步的。

假设您将盘子放入洗碗机中。你可以做其他事情，你已经将任务委托给洗碗机，所以这是异步的。异步通常更好，因为您可以一次执行多项操作。 Javascript 仅在从服务器请求信息时异步，因为 Javascript 是单线程的（它只在 1 个 CPU 内核上运行，并且一次只能自己做一件事）。

回调是异步任务完成时调用的函数。洗碗机完成了，所以现在您必须在完成您正在做的事情后立即清空它。

因此，在您的代码中，您启动洗碗机，说您将在洗碗机完成运行时发出警报（“3”），然后您发出警报 4 和 5。然后当洗碗机完成时/您的服务器返回数据，你会像你说的那样提醒 3。

这有意义吗？

Answer 2

您在 ajax 请求中提供成功回调函数的原因是请求可能需要一些时间才能返回，但您的代码可以继续运行。在这种情况下，将发送 ajax 请求，并记住成功函数以供以后使用，然后您的代码将继续（警报 4 和 5）。当浏览器收到对 ajax 请求的响应时，它会调用成功函数（警报 3）。

Javascript 的工作方式是，每个浏览器选项卡只运行一个线程，因此在任何先前运行的代码完成之前不会调用事件处理程序。因此，即使您的 getCurrentItems 函数需要几秒钟才能完成，此时服务器响应已返回，直到您的函数完成后才会调用成功函数。

编辑：因为 ajax 调用可能需要一些时间，所以通常不希望能够调用像 getCurrentItems 这样包含 ajax 请求的函数并等待响应。如果你这样做，那么你很可能会让你的浏览器窗口没有响应，并且你将不得不处理来自 ajax 调用的潜在错误。相反，您应该将任何您希望运行的依赖于 ajax 结果的代码放入成功函数中，或者放入您从那里调用的另一个函数中。随着语言的发展，Javascript 非常适合做这种事情。您甚至可以将回调函数作为getCurrentItems 的参数，并从成功函数中运行它。

Answer 3

正如其他人所提到的，您将按照您看到的顺序获得结果，因为 ajax 请求不会返回其数据并调用您的成功回调，直到收到响应，但代码会在 $ 之后立即继续执行.ajax 调用。

要获得您可能期望的工作流程，您可以使用 Promise，或者简单地传入回调：

function getCurrentItems(id, onSuccess){
    alert("2");
    $.ajax({
        url: "somePHPurlthatspitsoutajsonencodedArray.php",
        type: "POST",
        dataType: "json'",
        data: {id:id},
        success: function(data){
            alert("3");
            onSuccess(data);
        }
    });
    alert("4");
}

$(document).on('click', '.eventClass', function(e){
    alert("1");
    var id = "someID";
    var results = getCurrentItems(id, function(data){
       console.log('data',data);
       alert("5");
    });

});