停止for循環-jQuery

Question

上一個問題

我當時在看這個問題，但無法將其應用於我的問題。

這是我想做的：

• 使用一個按鈕循環遍歷一組html表
• 使用另一個暫停按鈕暫停動畫
• 從停止的地方繼續播放動畫

這與我正在研究的東西類似： 小提琴我的當前版本太笨拙，無法進行更新的小提琴，但是概念是相同的。 我將像最右邊的滑塊一樣更改表的內容。

這是代碼：

$('#Animate1').click(function(e){  //controls the tabR animation (top small table)
    for(i = 1; i < 37; i++){  //number of frames in the animation
        (function(i){   
            setTimeout(function(){  
                $('#amount1').val(i);  //this changes the number corresponding to the slider position 
                updateTable2(i);  //this updates the contents of the html table   
                updateHighlightedCell();  //this controls the "highlighted cells"
                $('#hSlider').slider({  animate:true,value: i});}, 1000 );  //this animates the slider
        }(i));  
    }   
});

• 我也有延遲的麻煩。 我試圖將延遲處理到循環中，但似乎只是開始延遲。 我希望能夠稍微控制幀速率。

• 我見過的許多示例都停止了無限循環，但是我的例子是有限的。 如何停止此循環並重新開始？ 我的最終循環將包含365個“幀”，因此不會那么快。

任何幫助，將不勝感激。 謝謝！

Answer 1

我在JSFiddle中制作了一個您可能感興趣的簡單版本，並希望提取出對您有幫助的組件。 還發表了大量評論，以幫助您理解作品。

我方法背后的基本思想是讓setInterval()充當您的for循環，每個循環一旦執行一次，它就會檢查是否已對其調用clearInterval() 。 您將有一個全球櫃台來跟蹤位置。