Рекурсивного заполнение функции стек

Question

У меня есть качания функции анимации, что я создал, однако в определенный момент я хочу, чтобы уничтожить связанную анимацию в стеке, однако, когда я делаю это, я получаю сообщение об ошибке:

Uncaught RangeError: Maximum call stack size exceeded

Это, очевидно, потому, что я заполняю весь стек, однако мне интересно, есть ли лучший способ выполнить следующую анимацию, но при этом создать плавный способ остановить ее, когда захочу?

function wobble(targetElement, speed, distance) { 
    targetElement.animate({ marginLeft: "+=" + distance}, { 
     complete: function() {    
      targetElement.animate({ marginLeft: "-=" + distance}, { 
       complete: function() { 
        wobble(targetElement, speed, distance, status); 
       } 
      }); 
     } 
    }); 
} 

Я использовал finish() убить очередь и остановить анимацию, это, как я получил эту ошибку.

Answer 1

Я не проверял код, но вы могли бы попробовать что-то вроде этого:

var count=0; 
    function wobble(targetElement, speed, distance,count) { 
     if (count < 50){ 
      targetElement.animate({ marginLeft: "+=" + distance}, { 
       complete: wobble (targetElement, speed, distance,count++); 
      } 
     } 
    }); 

Второе решение (без тестирования кода)

var continue=true; 
function wobble(targetElement, speed, distance) { 
    if (continue){ 
     targetElement.animate({ marginLeft: "+=" + distance}, { 
      complete: wobble (targetElement, speed, distance); 
     }); 
    } 
}; 

// если вы хотите, чтобы закончить «шатания» вам просто нужно установить переменную «continue» в false, например

$('button.stop').on('click',function(){ 
     console.log("wobbling stopped"); 
     continue=false; 
}); 

Итак, главное, Вам нужно что-то (флаг), который сообщает «качать» метод STOP. В этом случае флаг будет переменной «continue», которая будет изменена с «true» на «false», когда вы захотите.