تسلسل طلبات Ajax

عند التكرار عبر مجموعة وإجراء استدعاءات Ajax فردية لكل عنصر، من الضروري التحكم في التسلسل لمنع التحميل الزائد على الخادم وتجميد المتصفح. على الرغم من أنه يمكن استخدام مكررات مخصصة، إلا أن هناك حلولًا أكثر أناقة متاحة.

jQuery 1.5

في jQuery 1.5 والإصدارات الأحدث، يستفيد المكون الإضافي $.ajaxQueue() من $ .Deferred و$.queue() و$.ajax() لإدارة تسلسل الطلب وتقديم وعد يتم حله عند اكتمال الطلب.

التنفيذ:

var jqXHR,
    dfd = $.Deferred(),
    promise = dfd.promise();

ajaxQueue.queue( doRequest );

promise.abort = function( statusText ) {
  if ( jqXHR ) {
    return jqXHR.abort( statusText );
  }
  var queue = ajaxQueue.queue(),
      index = $.inArray( doRequest, queue );
  if ( index > -1 ) {
    queue.splice( index, 1 );
  }
  dfd.rejectWith( ajaxOpts.context || ajaxOpts,
    [ promise, statusText, "" ] );
  return promise;
};

function doRequest( next ) {
  jqXHR = $.ajax( ajaxOpts )
    .done( dfd.resolve )
    .fail( dfd.reject )
    .then( next, next );
}

return promise;

};

})(jQuery);

jQuery 1.4

بالنسبة إلى jQuery 1.4، يمكن استخدام قائمة انتظار الرسوم المتحركة لإنشاء "قائمة انتظار" مخصصة. يمكنك أيضًا إنشاء مكون إضافي $.ajaxQueue() خاص بك يستخدم قائمة انتظار 'fx' الخاصة بـ jQuery لبدء الطلب الأول في قائمة الانتظار تلقائيًا إذا لم يكن قيد التشغيل بالفعل.

التنفيذ:

var oldComplete = ajaxOpts.complete;

ajaxQueue.queue(function(next) {
  ajaxOpts.complete = function() {
    if (oldComplete) oldComplete.apply(this, arguments);
    next();
  };
  $.ajax(ajaxOpts);
});

};

})(jQuery);

مثال:

url: '/echo/html/',
data: {html : "[" idx "] " $(this).html()},
type: 'POST',
success: function(data) {
  $("#output").append($("<li>", { html: data }));
}

});
});

يضمن ذلك تنفيذ كل طلب Ajax بشكل تسلسلي، مما يسمح بمعالجة سلسة لتحميل الخادم والحفاظ على استجابة المتصفح .