Comment exécuter séquentiellement des requêtes AJAX dans JQuery pour des performances optimales ?

Exécuter séquentiellement des requêtes AJAX

Dans le scénario où vous devez parcourir une collection et exécuter une requête AJAX pour chaque élément de manière séquentielle, en maintenant les performances du serveur et en évitant le gel du navigateur peut être un défi. Voici des approches innovantes pour résoudre ce problème :

jQuery 1.5 :

Utilisez le plugin $.ajaxQueue(), qui utilise les fonctions Deferred, queue() et $ Mécanismes .ajax(). Ce plugin gère la création d'une file d'attente de requêtes AJAX et fournit une promesse qui se résout une fois la requête terminée.

(function($) {

  // Create an empty object as the AJAX request queue
  var ajaxQueue = $({});

  $.ajaxQueue = function(ajaxOpts) {
    // Define the deferred object and its promise
    var dfd = $.Deferred(),
        promise = dfd.promise();

    // Enqueue the AJAX request
    ajaxQueue.queue(doRequest);

    // Add an abort method to the promise
    promise.abort = function(statusText) {
      // Abort the request if active
      if (jqXHR) {
        return jqXHR.abort(statusText);
      }

      // Remove the request from the queue
      var queue = ajaxQueue.queue(),
          index = $.inArray(doRequest, queue);
      if (index > -1) {
        queue.splice(index, 1);
      }

      // Reject the deferred
      dfd.rejectWith(ajaxOpts.context || ajaxOpts,
        [promise, statusText, ""]);

      return promise;
    };

    // Define the function to execute the request
    function doRequest(next) {
      jqXHR = $.ajax(ajaxOpts)
        .done(dfd.resolve)
        .fail(dfd.reject)
        .then(next, next);
    }

    return promise;
  };

})(jQuery);

jQuery 1.4 :

Si vous utilisez jQuery 1.4, vous peut exploiter la file d'attente d'animation sur un objet vide pour établir une « file d'attente » personnalisée pour les requêtes AJAX.

(function($) {
  // Create an empty object as the AJAX request queue
  var ajaxQueue = $({});

  $.ajaxQueue = function(ajaxOpts) {
    // Hold the original complete function
    var oldComplete = ajaxOpts.complete;

    // Enqueue the AJAX request
    ajaxQueue.queue(function(next) {
      // Define a complete callback to proceed with the queue
      ajaxOpts.complete = function() {
        // Execute the original complete function, if present
        if (oldComplete) oldComplete.apply(this, arguments);

        next(); // Proceed to the next request
      };

      // Execute the request
      $.ajax(ajaxOpts);
    });
  };

})(jQuery);

Exemple d'utilisation :

Avec ces techniques, vous pouvez séquencez les requêtes AJAX pour chaque élément d'une collection, garantissant ainsi les performances du serveur tout en évitant les blocages du navigateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!