Question

Curious if anything jumps out here.

But when I run this code block :

    $items = $('ul#jobs_to_approve').find('.checked').parents('li');
    $items.fadeOut(function(){
      $items.find('.checked').removeClass('checked').addClass('unchecked');
      $.each($items, function(i, val) { 
        $.post($(val).attr('data-url'), function(data) {
          $(val).attr('data-url', $(val).attr('data-url').replace('approve','disapprove') );
        });
      });
      SSK.quickbooks.check_active_approvals();
      $('ul#jobs_to_sync').prepend($items.fadeIn());
    });
  },

So if I have 2 items selected for $items, by the time it gets to the end, it is sending 4 Ajax requests. For 3 items, it sends 9 ajax requests. For 4, it sends 16 AJAX requests. There’s a pattern. 😉

My question is..why is it not sticking to the original number?

Answer 1

The docs for .fadeOut say:

If multiple elements are animated, it is important to note that the callback is executed once per matched element, not once for the animation as a whole.

You’re iterating all elements each time the callback is fired for one element. So for n elements, you’re making n * n requests. You don’t need to loop inside the callback ($.each) because the callback itself basically acts as a loop.

You probably want to run the other code in the callback only once, too.