Bagaimana untuk Melaksanakan Permintaan AJAX Secara Berurutan dalam JQuery untuk Prestasi Optimum?

Laksanakan Permintaan AJAX Secara Berurutan

Dalam senario di mana anda perlu mengulangi koleksi dan melaksanakan permintaan AJAX untuk setiap elemen secara berurutan, mengekalkan prestasi pelayan dan mengelakkan pegun penyemak imbas boleh mencabar. Berikut ialah pendekatan inovatif untuk menyelesaikan isu ini:

jQuery 1.5 :

Gunakan pemalam $.ajaxQueue(), yang menggunakan Deferred, queue(), dan $ .ajax() mekanisme. Pemalam ini menguruskan penciptaan baris gilir permintaan AJAX dan menyediakan janji yang diselesaikan apabila permintaan selesai.

(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:

Jika menggunakan jQuery 1.4, anda boleh memanfaatkan baris gilir animasi pada objek kosong untuk mewujudkan "baris gilir" tersuai untuk permintaan 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);

Contoh Penggunaan:

Dengan teknik ini, anda boleh turutan permintaan AJAX untuk setiap item dalam koleksi, memastikan prestasi pelayan sambil mengelakkan penguncian penyemak imbas.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Permintaan AJAX Secara Berurutan dalam JQuery untuk Prestasi Optimum?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!