Question

我需要执行两个独立的ajax请求和一个在两个成功后都要执行的函数。我显然可以发送第一个请求，然后在第一个请求成功时发送第二个请求，最后在第二个请求成功时执行该功能。但有没有办法分别执行它们并在它们都成功时执行它？

即。我可以提出以下要求：

var jqxhr1 = $.post( "example1.php", function() {
  alert( "first success" );
})
var jqxhr2 = $.post( "example2.php", function() {
  alert( "second success" );
})

以及以下功能：

function myfunction() {
  alert( "function success" );
}

Answer 1

正如许多人在你的问题中评论的最好方法是使用Promises。我看到你正在使用jQuery，所以我将使用jQuery发布你的答案。所以基本设置将是：

<强> HTML ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>

<button id="one">Send 2 ajax</button>

<script src="script.js"></script>
</body>
</html>

<强> example1.php ：

<?php
echo json_encode($_POST['button']);

<强> example2.php ：

<?php
sleep(5);
echo json_encode($_POST['button']);

和javascript档案：

$( document ).ready( function () {

    var $button1 = $( '#one' );

    $button1.on( 'click', function ( e ) {
        e.preventDefault();

        $.when(
            $.ajax( {
                url: "example1.php",
                type: "post",
                data: { button: "some data" }
            } ),
            $.ajax( {
                url: "example2.php",
                type: "post",
                data: { button: "some data" }
            } ) ).done( function ( a1, a2 ) {
            console.log( a1 );
            console.log( a2 );
        } );

    } )

} );

解释：当您希望等待多个ajax请求成功时，会使用$.when()。因此，在我的示例中，当两个ajax请求成功时，完成（）在5秒后执行。第一个和第二个参数是从第一个和第二个ajax调用返回的值。您可以在上面提供的链接中阅读更多相关信息。返回的数据是这样的：

Array[3]
    0:""Some data from AJAX 1""
    1:"success"
    2:Object
    length:3
    __proto__:Array[0]

Array[3]
    0:""Some data from AJAX 2""
    1:"success"
    2:Object
    length:3
    __proto__:Array[0]

example1.php 和 example2.php 非常简单 - 他们只是将json发送回javascript。除了 example2.php 模拟ajax响应超时5秒。

P.S。：上面的代码就是一个例子，我在我的本地机器上运行。

Answer 2

您需要使用set.seed在多个Deferred对象的情况下

$.when

希望这会有所帮助。

Answer 3

您可以声明一个名为requestsCompleted的变量，并将其赋值为零。每次请求完成后，将1添加到变量中，当它等于2时，执行函数

编辑：正如@Pogrindis所指出的，最好的方法是使用Promise.all（）（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all）

Answer 4

只需使用以下内容：

 var count = 0;

    while (count < 2){
     //do ajax call
         //on success increment counter
         //on error just log and continue

    //you can put a timeout here and just do 'return' after if you wish
    }

    functionCall();

在两个（或更多）ajax请求成功后执行一个函数

4 个答案: