.animate() not running from time to time.. why?!?

.animate() not running from time to time.. why?!?

I am having an issue where an animate function is not running periodically.

so to start with i have a piece of code that listens for a swipe on an element

  1.     var maxTime = 1000,
  2.         // allow movement if < 1000 ms (1 sec)
  3.         maxDistance = 50,
  4.         // swipe movement of 50 pixels triggers the swipe
  5.         target = jQuery('.pageSize'),
  6.         startX = 0,
  7.         startTime = 0,
  8.         touch = "ontouchend" in document,
  9.         startEvent = (touch) ? 'touchstart' : 'mousedown',
  10.         moveEvent = (touch) ? 'touchmove' : 'mousemove',
  11.         endEvent = (touch) ? 'touchend' : 'mouseup';
  12.    
  13.     target.bind(startEvent, function(e) {
  14.         // prevent image drag (Firefox)
  15.         // e.preventDefault();
  16.         startTime = e.timeStamp;
  17.         startX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX;
  18.     }).bind(endEvent, function(e) {
  19.         startTime = 0;
  20.         startX = 0;
  21.     }).bind(moveEvent, function(e) {
  22.         // e.preventDefault();
  23.         var currentX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX,
  24.             currentDistance = (startX === 0) ? 0 : Math.abs(currentX - startX),
  25.             // allow if movement < 1 sec
  26.             currentTime = e.timeStamp;
  27.         if (startTime !== 0 && currentTime - startTime < maxTime && currentDistance > maxDistance) {
  28.             if (currentX < startX) {
  29.                 // swipe left code here
  30.               
  31.                console.log("page forward trigger");
  32.                jQuery(window).trigger('swipeForward');
  33.                
  34.             }
  35.             if (currentX > startX) {
  36.                 // swipe right code here
  37.                  console.log("page back trigger");
  38.                //slide("back", pageSize);
  39.                 jQuery(window).trigger('swipeBackward');
  40.             }
  41.             startTime = 0;
  42.             startX = 0;
  43.         }
  44.     });

if a user swipes left for example it triggers the event swipeForward

so this sets off the next piece of code

  1.     jQuery(window).on('swipeForward', swipeHandlerNext );
  2.     jQuery(window).on('swipeBackward', swipeHandlerPrev );

I am using swipe handlers so that a user cant swipe twice and create a double event


this would then say execute the swipeHandlerNext function


  1.     function swipeHandlerNext(event) {
  2.    
  3.         // If event isn't already marked as handled, handle it
  4.         if(event.handled !== true) {
  5.    
  6.             // Kill event handler, preventing any more clicks
  7.             jQuery(".pageSize").off("swipeForward");
  8.    
  9.             // Do your stuff here
  10.             pageSize = jQuery(".mainHeader").width();
  11.             slide("forward", pageSize);
  12.            
  13.             console.log(" swipe complete page forward via swipe");
  14.    
  15.             // Mark event as handled
  16.             event.handled = true;
  17.         }
  18.        
  19.         return false;
  20.     }

this obviously executes the slide function. this is the one that has .animate command
  1. function slide(data, pageSize) {
  2.    
  3.    
  4.     if (!pageSize) {
  5.     pageSize = jQuery(".mainHeader").width();
  6.     }
  7.    
  8.     var promise  = calcLeft(data, pageSize);
  9.   
  10.    
  11.     jQuery.when(promise).then(function(result) {
  12.         console.log(result);
  13.         console.log("reached here");
  14.        
  15.         jQuery('#pageHolder').addClass("test2" + result).delay(500).animate({
  16.             left: result
  17.            
  18.           }, 400, function() {
  19.             console.log("animation started");
  20.             calcNav(pageSize);
  21.             calcPage(pageSize);
  22.             jQuery(".touchslider-prev").on("click", clickHandlerPrev);
  23.             jQuery(".touchslider-next").on("click", clickHandlerNext)
  24.             jQuery(".pageSize").on("swipeForward", swipeHandlerNext);
  25.             jQuery(".pageSize").on("swipeBackward", swipeHandlerPrev);
  26.             console.log("animation complete");
  27.      
  28.         });
  29.        
  30.         console.log (jQuery('#pageHolder'));
  31.     });
  32.    
  33. }
so as i was saying on iPad and iPadMini when I swipe sometimes it doesnt work. Its really sporadic sometimes i can swipe 10 times and it crashes and other times it fails on the first time.

I know its failing on the animate as the times it doesnt work i get no console log of animation start or finish

I also wonder if the prevent double slide is working as in the console if i swipe and it doesnt work i can do this multiple times and get the logs for "swipe complete page forward via swipe" - surely this should show as the jQuery(".pageSize").on("swipeForward", swipeHandlerNext); is only set within the animation complete.


I have other events that trigger slide like buttons and they never fail

Thanks for any help