it-swarm.com.de

Warten Sie, bis alle jQuery Ajax-Anforderungen abgeschlossen sind.

Wie lasse ich eine Funktion warten, bis alle jQuery Ajax-Anforderungen in einer anderen Funktion ausgeführt wurden?

Kurz gesagt, ich muss warten, bis alle Ajax-Anforderungen erledigt sind, bevor ich die nächste ausführe. Aber wie?

630
jamietelin

zu diesem Zweck definiert jQuery jetzt eine when-Funktion .

Es akzeptiert eine beliebige Anzahl von zurückgestellten Objekten als Argumente und führt eine Funktion aus, wenn alle aufgelöst wurden.

Das heißt, wenn Sie beispielsweise vier Ajax-Anforderungen initiieren möchten und anschließend eine Aktion ausführen möchten, können Sie Folgendes tun:

$.when(ajax1(), ajax2(), ajax3(), ajax4()).done(function(a1, a2, a3, a4){
    // the code here will be executed when all four ajax requests resolve.
    // a1, a2, a3 and a4 are lists of length 3 containing the response text,
    // status, and jqXHR object for each of the four ajax calls respectively.
});

function ajax1() {
    // NOTE:  This function must return the value 
    //        from calling the $.ajax() method.
    return $.ajax({
        url: "someUrl",
        dataType: "json",
        data:  yourJsonData,            
        ...
    });
}

Meiner Meinung nach sorgt es für eine saubere und klare Syntax und vermeidet die Verwendung globaler Variablen wie ajaxStart und ajaxStop, die während der Entwicklung Ihrer Seite unerwünschte Nebenwirkungen haben können.

Wenn Sie nicht im Voraus wissen, auf wie viele Ajax-Argumente Sie warten müssen (d. H., Sie möchten eine variable Anzahl von Argumenten verwenden), können Sie dies dennoch tun, dies ist jedoch nur ein bisschen kniffliger. Siehe Übergeben eines Arrays von Zurückgestellten an $ .when () (und möglicherweise jQuery .when Fehlerbehebung mit variabler Anzahl von Argumenten ).

Wenn Sie eine genauere Kontrolle über die Fehlermodi der Ajax-Skripte usw. benötigen, können Sie das von .when() zurückgegebene Objekt speichern - es ist ein jQuery Promise -Objekt, das alle ursprünglichen Ajax-Abfragen umfasst. Sie können .then() oder .fail() aufrufen, um detaillierte Erfolgs-/Fehlerbehandlungsroutinen hinzuzufügen.

857
Alex

Wenn Sie warten möchten, bis alle Ajax-Anforderungen in Ihrem Dokument abgeschlossen sind, verwenden Sie einfach $.ajaxStop event auf folgende Weise:

_  $(document).ajaxStop(function () {
      // 0 === $.active
  });
_

In diesem Fall müssen Sie nicht erraten, wie viele Anforderungen in einer Anwendung möglicherweise in Zukunft beendet werden. In einigen Fällen können Ajax-Anforderungen Teil der inneren Logik einer Funktion sein, was sehr kompliziert sein kann (z. B. Aufrufen anderer Funktionen). In diesem Fall müssen Sie möglicherweise nicht warten, bis die Funktion mit der gesamten Logik ausgeführt wird, sondern mit Warten Sie nur , bis der Teil ajax abgeschlossen ist.

$.ajaxStop hier kann auch an jeden HTML Knoten gebunden werden, von dem Sie glauben, dass er von ajax geändert wurde.

Wiederum besteht der Zweck dieses Handlers darin, zu wissen, wann kein aktiver ajax vorhanden ist, um etwas nicht zu löschen oder zurückzusetzen.

P.S. Wenn es Ihnen nichts ausmacht, ES6-Syntax zu verwenden, können Sie _Promise.all_ für bekannte ajax -Methoden verwenden. Beispiel:

_Promise.all([ajax1(), ajax2()]).then(() => {
 // all requests finished successfully
}).catch(() => {
 // all requests finished but one or more failed
})
_

Ein interessanter Punkt ist, dass es sowohl mit Promises- als auch mit _$.ajax_ -Anforderungen funktioniert. Hier ist jsFiddle das letzte demonstrieren.

280

Ich fand eine gute Antwort von Zwerg mein Selbst, das genau das ist, wonach ich gesucht habe :)

jQuery ajaxQueue

//This handles the queues    
(function($) {

  var ajaxQueue = $({});

  $.ajaxQueue = function(ajaxOpts) {

    var oldComplete = ajaxOpts.complete;

    ajaxQueue.queue(function(next) {

      ajaxOpts.complete = function() {
        if (oldComplete) oldComplete.apply(this, arguments);

        next();
      };

      $.ajax(ajaxOpts);
    });
  };

})(jQuery);

Dann können Sie der Warteschlange eine Ajax-Anforderung wie folgt hinzufügen:

$.ajaxQueue({
        url: 'page.php',
        data: {id: 1},
        type: 'POST',
        success: function(data) {
            $('#status').html(data);
        }
    });
31
jamietelin

HINWEIS: Die obigen Antworten verwenden Funktionen, die zum Zeitpunkt der Erstellung dieser Antwort noch nicht vorhanden waren. Ich empfehle die Verwendung von jQuery.when() anstelle dieser Ansätze, überlasse die Antwort jedoch historischen Zwecken.

-

Sie könnten wahrscheinlich mit einem einfachen Zählsemaphor auskommen, obwohl es von Ihrem Code abhängt, wie Sie es implementieren. Ein einfaches Beispiel wäre so etwas wie ...

var semaphore  = 0,     // counting semaphore for ajax requests
    all_queued = false; // bool indicator to account for instances where the first request might finish before the second even starts

semaphore++;
$.get('ajax/test1.html', function(data) {
    semaphore--;
    if (all_queued && semaphore === 0) {
        // process your custom stuff here
    }
});

semaphore++;
$.get('ajax/test2.html', function(data) {
    semaphore--;
    if (all_queued && semaphore === 0) {
        // process your custom stuff here
    }
});

semaphore++;
$.get('ajax/test3.html', function(data) {
    semaphore--;
    if (all_queued && semaphore === 0) {
        // process your custom stuff here
    }
});

semaphore++;
$.get('ajax/test4.html', function(data) {
    semaphore--;
    if (all_queued && semaphore === 0) {
        // process your custom stuff here
    }
});

// now that all ajax requests are queued up, switch the bool to indicate it
all_queued = true;

Wenn Sie möchten, dass dies wie {async: false} funktioniert, aber den Browser nicht sperren möchten, können Sie dasselbe mit einer jQuery-Warteschlange erreichen.

var $queue = $("<div/>");
$queue.queue(function(){
    $.get('ajax/test1.html', function(data) {
        $queue.dequeue();
    });
}).queue(function(){
    $.get('ajax/test2.html', function(data) {
        $queue.dequeue();
    });
}).queue(function(){
    $.get('ajax/test3.html', function(data) {
        $queue.dequeue();
    });
}).queue(function(){
    $.get('ajax/test4.html', function(data) {
        $queue.dequeue();
    });
});
20
BBonifield

Verwenden Sie das Ereignis ajaxStop.

Angenommen, Sie haben eine Nachricht zum Laden ... , während Sie 100 Ajax-Anforderungen abrufen, und Sie möchten diese Nachricht nach dem Laden ausblenden.

Aus der jQuery doc :

$("#loading").ajaxStop(function() {
  $(this).hide();
});

Beachten Sie, dass es auf alle Ajax-Anforderungen wartet, die auf dieser Seite ausgeführt werden.

20
olafure

Eine kleine Problemumgehung sieht folgendermaßen aus:

// Define how many Ajax calls must be done
var ajaxCalls = 3;
var counter = 0;
var ajaxCallComplete = function() {
    counter++;
    if( counter >= ajaxCalls ) {
            // When all ajax calls has been done
        // Do something like hide waiting images, or any else function call
        $('*').css('cursor', 'auto');
    }
};

var loadPersons = function() {
        // Show waiting image, or something else
    $('*').css('cursor', 'wait');

    var url = global.ctx + '/loadPersons';
    $.getJSON(url, function(data) {
            // Fun things
    })
    .complete(function() { **ajaxCallComplete();** });
};

var loadCountries = function() {
    // Do things
    var url = global.ctx + '/loadCountries';
    $.getJSON(url, function(data) {
            // Travels
    })
    .complete(function() { **ajaxCallComplete();** });
};

var loadCities = function() {
    // Do things
    var url = global.ctx + '/loadCities';
    $.getJSON(url, function(data) {
            // Travels
    })
    .complete(function() { **ajaxCallComplete();** });
};

$(document).ready(function(){
    loadPersons();
    loadCountries();
    loadCities();
});

Hoffnung kann nützlich sein ...

7
Jesfre

javascript ist ereignisbasiert, daher sollten Sie niemals warten , sondern Hooks/Callbacks setzen

Sie können wahrscheinlich nur die success/complete-Methoden von jquery.ajax verwenden

Oder Sie könnten . AjaxComplete verwenden:

$('.log').ajaxComplete(function(e, xhr, settings) {
  if (settings.url == 'ajax/test.html') {
    $(this).text('Triggered ajaxComplete handler.');
    //and you can do whatever other processing here, including calling another function...
  }
});

sie sollten jedoch einen Pseudocode für den Aufruf Ihrer Ajax-Anforderung (en) angeben, um genauer zu sein ...

7
Stefano

Wie bereits erwähnt, können Sie mit ajaxStop() warten, bis alle Ajax-Anforderungen abgeschlossen sind.

$(document).ajaxStop(function() {
     // This function will be triggered every time any ajax request is requested and completed
});

Wenn Sie dies für eine bestimmte ajax() -Anforderung tun möchten, können Sie die complete() -Methode innerhalb der bestimmten Ajax-Anforderung am besten verwenden:

$.ajax({
    type: "POST",
    url: "someUrl",
    success: function(data) {
        // This function will be triggered when ajax returns a 200 status code (success)
    },
    complete: function() {
        // This function will be triggered always, when ajax request is completed, even it fails/returns other status code
    },
    error: function() {
        // This will be triggered when ajax request fail.
    }
});


Aber, wenn Sie nur auf ein paar und bestimmte Ajax-Anfragen warten müssen? Verwenden Sie das wunderbare Javascript Versprechen , um zu warten Bis die Ajax, auf die Sie warten möchten, fertig sind. Ich habe ein kurzes, einfaches und lesbares Beispiel angefertigt, um Ihnen zu zeigen, wie Versprechen mit Ajax funktionieren.
Bitte schauen Sie sich das nächste Beispiel an . Ich habe setTimeout verwendet, um das Beispiel zu verdeutlichen.

// Note:
// resolve() is used to mark the promise as resolved
// reject() is used to mark the promise as rejected

$(document).ready(function() {
    $("button").on("click", function() {

        var ajax1 = new Promise((resolve, reject) => {
            $.ajax({
                type: "GET",
                url: "https://miro.medium.com/max/1200/0*UEtwA2ask7vQYW06.png",
                xhrFields: { responseType: 'blob'},
                success: function(data) {
                    setTimeout(function() {
                        $('#image1').attr("src", window.URL.createObjectURL(data));
                        resolve(" Promise ajax1 resolved");
                    }, 1000);
                },
                error: function() {
                    reject(" Promise ajax1 rejected");
                },
            });
        });

        var ajax2 = new Promise((resolve, reject) => {
            $.ajax({
                type: "GET",
                url: "https://cdn1.iconfinder.com/data/icons/social-media-vol-1-1/24/_github-512.png",
                xhrFields: { responseType: 'blob' },
                success: function(data) {
                    setTimeout(function() {
                         $('#image2').attr("src", window.URL.createObjectURL(data));
                         resolve(" Promise ajax2 resolved");
                    }, 1500);
                },
                error: function() {
                    reject(" Promise ajax2 rejected");
                },
            });
        });

        var ajax3 = new Promise((resolve, reject) => {
            $.ajax({
                type: "GET",
                url: "https://miro.medium.com/max/632/1*LUfpOf7teWvPdIPTBmYciA.png",
                xhrFields: { responseType: 'blob' },
                success: function(data) {
                    setTimeout(function() {
                         $('#image3').attr("src", window.URL.createObjectURL(data));
                         resolve(" Promise ajax3 resolved");
                    }, 2000);
                },
                error: function() {
                    reject(" Promise ajax3 rejected");
                },
            });
        });
        
        Promise.all([ajax1, ajax2, ajax3]).then(values => {
            console.log("We waited until ajax ended: " + values);
            console.log("My few ajax ended, lets do some things!!")
        }, reason => {
            console.log("Promises failed: " + reason);
        });
        
        // Or if you want wait for them individually do it like this
        // ajax1.then(values => {
        //    console.log("Promise 1 resolved: " + values)
        // }, reason => {
        //     console.log("Promise 1 failed: " + reason)
        // });
    });

});
img {
  max-width: 200px;
  max-height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Make AJAX request</button>
<div id="newContent">
    <img id="image1" src="">
    <img id="image2" src="">
    <img id="image3" src="">
</div>
2
SilverSurfer

mit jQuery können Sie angeben, ob die Ajax-Anforderung asynchron sein soll oder nicht. Sie können die Ajax-Anforderungen einfach synchronisieren, und der Rest des Codes wird erst ausgeführt, wenn sie zurückkehren.

Zum Beispiel:

jQuery.ajax({ 
    async: false,
    //code
});
2
shmuel613

Wenn Sie etwas Einfaches brauchen; einmal und fertig Rückruf

        //multiple ajax calls above
        var callback = function () {
            if ($.active !== 0) {
                setTimeout(callback, '500');
                return;
            }
            //whatever you need to do here
            //...
        };
        callback();
1
Fatmuemoo

Um Alex 'Antwort zu erweitern, habe ich ein Beispiel mit variablen Argumenten und Versprechungen. Ich wollte Bilder über Ajax laden und sie auf der Seite anzeigen, nachdem sie alle geladen wurden.

Dazu habe ich Folgendes verwendet:

let urlCreator = window.URL || window.webkitURL;

// Helper function for making ajax requests
let fetch = function(url) {
    return $.ajax({
        type: "get",
        xhrFields: {
            responseType: "blob"
        },
        url: url,
    });
};

// Map the array of urls to an array of ajax requests
let urls = ["https://placekitten.com/200/250", "https://placekitten.com/300/250"];
let files = urls.map(url => fetch(url));

// Use the spread operator to wait for all requests
$.when(...files).then(function() {
    // If we have multiple urls, then loop through
    if(urls.length > 1) {
        // Create image urls and tags for each result
        Array.from(arguments).forEach(data => {
            let imageUrl = urlCreator.createObjectURL(data[0]);
            let img = `<img src=${imageUrl}>`;
            $("#image_container").append(img);
        });
    }
    else {
        // Create image source and tag for result
        let imageUrl = urlCreator.createObjectURL(arguments[0]);
        let img = `<img src=${imageUrl}>`;
        $("#image_container").append(img);
    }
});

Aktualisiert, um für einzelne oder mehrere URLs zu funktionieren: https://jsfiddle.net/euypj5w9/

1
GammaGames

Ich verwende die Größenprüfung, wenn alle Ajax-Ladevorgänge abgeschlossen sind

function get_ajax(link, data, callback) {
    $.ajax({
        url: link,
        type: "GET",
        data: data,
        dataType: "json",
        success: function (data, status, jqXHR) {
            callback(jqXHR.status, data)
        },
        error: function (jqXHR, status, err) {
            callback(jqXHR.status, jqXHR);
        },
        complete: function (jqXHR, status) {
        }
    })
}

function run_list_ajax(callback){
    var size=0;
    var max= 10;
    for (let index = 0; index < max; index++) {
        var link = 'http://api.jquery.com/ajaxStop/';
        var data={i:index}
        get_ajax(link,data,function(status, data){
            console.log(index)
            if(size>max-2){
                callback('done')
            }
            size++
            
        })
    }
}

run_list_ajax(function(info){
    console.log(info)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
1
tranchau

$.when funktioniert bei mir nicht, callback(x) statt return x hat wie hier beschrieben funktioniert: https://stackoverflow.com/a/13455253/10357604

1

Auf der Grundlage der Antwort von @BBonifield habe ich eine Utility-Funktion geschrieben, damit die Semaphorlogik nicht in allen Ajax-Aufrufen verteilt wird.

untilAjax ist die Dienstprogrammfunktion, die eine Rückruffunktion aufruft, wenn alle AjaxCalls abgeschlossen sind.

ajaxObjs ist ein Array von Ajax-Einstellungsobjekten [http://api.jquery.com/jQuery.ajax/].

fn ist eine Rückruffunktion

function untilAjax(ajaxObjs, fn) {
  if (!ajaxObjs || !fn) {
    return;
  }
  var ajaxCount = ajaxObjs.length,
    succ = null;

  for (var i = 0; i < ajaxObjs.length; i++) { //append logic to invoke callback function once all the ajax calls are completed, in success handler.
    succ = ajaxObjs[i]['success'];
    ajaxObjs[i]['success'] = function(data) { //modified success handler
      if (succ) {
        succ(data);
      }
      ajaxCount--;
      if (ajaxCount == 0) {
        fn(); //modify statement suitably if you want 'this' keyword to refer to another object
      }
    };
    $.ajax(ajaxObjs[i]); //make ajax call
    succ = null;
  };

Beispiel: Die Funktion doSomething verwendet untilAjax.

function doSomething() {
  // variable declarations
  untilAjax([{
    url: 'url2',
    dataType: 'json',
    success: function(data) {
      //do something with success data
    }
  }, {
    url: 'url1',
    dataType: 'json',
    success: function(data) {
      //do something with success data
    }
  }, {
    url: 'url2',
    dataType: 'json',
    success: function(response) {
      //do something with success data
    }
  }], function() {
    // logic after all the calls are completed.
  });
}
1

Sie können auch async.js verwenden.

Ich denke, es ist besser als $ .when, weil Sie alle Arten von asynchronen Aufrufen zusammenführen können, die keine Versprechungen wie Timeouts, SqlLite-Aufrufe usw. und nicht nur Ajax-Anforderungen unterstützen.

1

Ich empfehle dringend die Verwendung von $. When () , wenn Sie von vorne beginnen.

Obwohl diese Frage mehr als eine Million Antworten hat, habe ich für meinen Fall nichts Nützliches gefunden. Angenommen, Sie müssen sich mit einer vorhandenen Codebasis befassen, führen bereits einige Ajax-Aufrufe durch und möchten nicht die Komplexität von Versprechungen einführen und/oder das Ganze wiederholen.

Wir können die Funktionen jQuery .data, .on und .trigger, die seit jeher Teil von jQuery sind, problemlos nutzen.

Codepen

Das Gute an meiner Lösung ist:

  • es ist offensichtlich, wovon der Rückruf genau abhängt

  • der Funktion triggerNowOrOnLoaded ist es egal, ob die Daten bereits geladen wurden oder wir noch darauf warten

  • es ist super einfach, es in einen vorhandenen Code zu stecken

$(function() {

  // wait for posts to be loaded
  triggerNowOrOnLoaded("posts", function() {
    var $body = $("body");
    var posts = $body.data("posts");

    $body.append("<div>Posts: " + posts.length + "</div>");
  });


  // some ajax requests
  $.getJSON("https://jsonplaceholder.typicode.com/posts", function(data) {
    $("body").data("posts", data).trigger("posts");
  });

  // doesn't matter if the `triggerNowOrOnLoaded` is called after or before the actual requests 
  $.getJSON("https://jsonplaceholder.typicode.com/users", function(data) {
    $("body").data("users", data).trigger("users");
  });


  // wait for both types
  triggerNowOrOnLoaded(["posts", "users"], function() {
    var $body = $("body");
    var posts = $body.data("posts");
    var users = $body.data("users");

    $body.append("<div>Posts: " + posts.length + " and Users: " + users.length + "</div>");
  });

  // works even if everything has already loaded!
  setTimeout(function() {

    // triggers immediately since users have been already loaded
    triggerNowOrOnLoaded("users", function() {
      var $body = $("body");
      var users = $body.data("users");

      $body.append("<div>Delayed Users: " + users.length + "</div>");
    });

  }, 2000); // 2 seconds

});

// helper function
function triggerNowOrOnLoaded(types, callback) {
  types = $.isArray(types) ? types : [types];

  var $body = $("body");

  var waitForTypes = [];
  $.each(types, function(i, type) {

    if (typeof $body.data(type) === 'undefined') {
      waitForTypes.Push(type);
    }
  });

  var isDataReady = waitForTypes.length === 0;
  if (isDataReady) {
    callback();
    return;
  }

  // wait for the last type and run this function again for the rest of the types
  var waitFor = waitForTypes.pop();
  $body.on(waitFor, function() {
    // remove event handler - we only want the stuff triggered once
    $body.off(waitFor);

    triggerNowOrOnLoaded(waitForTypes, callback);
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>Hi!</body>
1
cilf

Meine Lösung ist wie folgt

var request;
...
'services': {
  'GetAddressBookData': function() {
    //This is the primary service that loads all addressbook records 
    request = $.ajax({
      type: "POST",
      url: "Default.aspx/GetAddressBook",
      contentType: "application/json;",
      dataType: "json"
    });
  },

  ...

  'apps': {
    'AddressBook': {
      'data': "",
      'Start': function() {
          ...services.GetAddressBookData();
          request.done(function(response) {
            trace("ajax successful");
            ..apps.AddressBook.data = response['d'];
            ...apps.AddressBook.Filter();
          });
          request.fail(function(xhr, textStatus, errorThrown) {
            trace("ajax failed - " + errorThrown);
          });

Hat ganz gut funktioniert. Ich habe viele verschiedene Methoden ausprobiert, aber ich fand, dass dies die einfachste und am besten wiederverwendbare ist. Ich hoffe es hilft

0
Eric Sean Moore

Ich habe einen einfachen Weg gefunden, es mit shift()

function waitReq(id)
{
  jQuery.ajax(
  {
    type: 'POST',
    url: ajaxurl,
    data:
    {
      "page": id
    },
    success: function(resp)
    {
      ...........
      // check array length if not "0" continue to use next array value
      if(ids.length)
      {
        waitReq(ids.shift()); // 2
      )
    },
    error: function(resp)
    {
      ....................
      if(ids.length)
      {
        waitReq(ids.shift());
      )
    }
  });
}

var ids = [1, 2, 3, 4, 5];    
// shift() = delete first array value (then print)
waitReq(ids.shift()); // print 1
0
uingtea

Schau dir meine Lösung an:

1. Fügen Sie diese Funktion (und Variable) in Ihre Javascript-Datei ein:

var runFunctionQueue_callback;

function runFunctionQueue(f, index, callback) {

  var next_index = index + 1

  if (callback !== undefined) runFunctionQueue_callback = callback;

  if (f[next_index] !== undefined) {
    console.log(index + ' Next function avalaible -> ' + next_index);
    $.ajax({
      type: 'GET',
      url: f[index].file,
      data: (f[index].data),
      complete: function() {
        runFunctionQueue(f, next_index);
      }
    });
  } else {
    console.log(index + ' Last function');
    $.ajax({
      type: 'GET',
      url: f[index].file,
      data: (f[index].data),
      async: false,
      complete: runFunctionQueue_callback
    });
  }
}

2. Erstellen Sie ein Array mit Ihren Anforderungen, wie folgt:

var f = [
           {file: 'file_path', data: {action: 'action', data: 'any_data}},
           {file: 'file_path', data: {action: 'action', data: 'any_data}},
           {file: 'file_path', data: {action: 'action', data: 'any_data}},
           {file: 'file_path', data: {action: 'action', data: 'any_data}}
        ];

3. Rückruffunktion erstellen:

function Function_callback() {
  alert('done');
}

4. Rufen Sie die runFunctionQueue-Funktion mit folgenden Parametern auf:

runFunctionQueue(f, 0, QuestionInsert_callback);
// first parameter: array with requests data
// second parameter: start from first request
// third parameter: the callback function
0
Briganti

Ich bin auf dieses Problem gestoßen und habe ein generisches Plugin jquery_counter erstellt, um es zu lösen: https://bitbucket.org/stxnext/jquery_counter/

0
zefciu