遞歸函數填充棧

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; 
}); 

所以主要的觀點是：你需要什麼東西（一個標誌），告訴「擺動」方法到停止。在這種情況下，標誌將是「繼續」變量，當你需要時它將從「真」變爲「假」。