يبدو أن jQuery يقوم بإجراء مكالمات متعددة في وقت واحد

Question

آسف ، لكن يبدو أنني لا أفهم التسلسل بما يكفي لمعرفة هذه المشكلة ...

أنا أقوم بتطبيق مكون إضافي jQuery Carousel (jCarousellite) وأحاول إضافة خيار لإزالة "أحد عناصر carousel (حاليًا <div class="remove">)...

initEvents: function() {
        var self = this;
        // Bind jQuery event for REMOVE button click
        $('.remove').live('click', function() {     
            // Need to save the ID that we're removing
            var item = $(this).closest('li.sort');
            var itemId = item.attr("id");

            $(this).removeItem();

            self.refreshDisplay(itemId);
        }); 


 $.fn.removeItem = (function() {
  var item = this.closest('li.sort'); // could save this call by passing param

  item.fadeOut("normal", function() {
         $(this).remove();
      });

   // preserve jQuery chain
   return this;
 });
},

refreshDisplay(itemId) {
  // ...
  // redraws carousel
  // ...
  // itemId is used to remove from the array of Items to show (class-wide scope)
}

نظرًا لعدم وجود طريقة نظيفة "لتحديث" المكوّن الإضافي JCarousellite (ربما سأحاول تنفيذها في البرنامج المساعد الفعلي لاحقًا) ، فإن الإصلاح السريع والقذر لهذا هو مجرد تجديد الكاروسيل.

المشكلة هي أنني أحاول تلاشي العنصر الذي تم النقر عليه ، ومع ذلك ، يبدو أن shreftDisplay () يسمى قبل الرسوم المتحركة للتلاشي (وإزالة) العنصر الذي تم النقر عليه. لقد تحقق من هذا من خلال التعليق self.refreshDisplay(itemId); خط ويتلاشى ويزيل كما هو متوقع.

لذلك أعتقد أن هناك طريقة معينة أحتاجها لسلسلة هذا؟ لقد فعلت بضع ساعات من القراءة حول كيفية عمل التسلسل واعتقدت أنني فهمت ذلك ، ولكن لا يبدو.

أي وجميع المساعدة موضع تقدير ، شكرا!

Answer 1

الغرض من التسلسل هو السماح لأوامر متعددة بمشاركة كائن أساسي ، لكنه لا يتسبب في انتظار كل أمر سابق.

لذلك ، تحتاج إلى استخدام رد الاتصال. شيء مثل

initEvents: function() {
        var self = this;
        // Bind jQuery event for REMOVE button click
        $('.remove').live('click', function() {     
            // Need to save the ID that we're removing
            var item = $(this).closest('li.sort');
            var itemId = item.attr("id");

            $(this).removeItem(function() {
                self.refreshDisplay(itemId);
            });
        }); 


 $.fn.removeItem = (function(callback) {
  var item = this.closest('li.sort'); // could save this call by passing param

  item.fadeOut("normal", function() {
         $(this).remove();
         callback();  //now your refresh is being called after the fade.
      });

   // preserve jQuery chain
   return this;
 });
},