停止javascript定時器和動畫並恢復它們

我必須停止一個定時器和一個動畫，它的寬度隨着時間變量的減少而逐漸減小，然後如果按下一個按鈕則恢復這兩個動畫，以便條形圖動畫將會從停止的地方繼續，定時器繼續。我怎樣才能做到這一點？停止javascript定時器和動畫並恢復它們

我可以在按下按鈕時執行一個功能，它只是停止和恢復功能，我不知道。

$("#timebar")是動畫吧。

function startTimer() { 
    timer = setTimeout(function(){ 
     barAnimation(); 
    }, time); 
} 

function stopTimer() { 
    $('#timebar').stop(); 
    $('#timebar').css("width","100%"); 
    clearTimeout(timer); 
} 

function barAnimation() { 
    $("#timebar").animate({ width: "0%" }, time, "linear"); 
}

來源

2015-04-30 Cress

你需要一個計時器任何具體原因是什麼？ –

這是一場遊戲，如果時間到了，你會失去生命。如果您做出正確選擇，計時器和動畫將重置。 – Cress

@Shikkediel你不應該刪除你的答案，因爲我發現你的解決方案是最好的，只是當我選擇你的答案作爲你的答案時，你刪除了它。我爲你等待的時間感到抱歉，但我以前無法看到答案。 – Cress

這沒有動畫，但它確實提供了開始/停止和進度指示器。

var time = 0; 
 
var timer = 0; 
 
var running = false; 
 

 
function startTimer() { 
 
    running = true; 
 
    timer = setInterval(function() { 
 
    barAnimation(); 
 
    }, 1000); 
 
} 
 

 
function stopTimer() { 
 
    running = false; 
 
    clearInterval(timer); 
 
} 
 

 
function barAnimation() { 
 
    time++; 
 
    $("#count").text(time); 
 
    $("#timebar").prop("value", time); 
 
} 
 

 
$("#go").on("click", function(evt) { 
 
    if (running) { 
 
    stopTimer(); 
 
    } else { 
 
    startTimer(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button id="go">Go</button> 
 

 
<progress id="timebar" value="0" max="100"></progress> 
 

 
<div id="count"></div>

來源

2015-04-30 22:22:57 user2182349

我覺得這樣的事情是你要找的東西：

var time = 0; 
 
var remaining = 15000; 
 
var interval; 
 

 
$('#start').click(startTimer); 
 
$('#stop').click(stopTimer); 
 

 
function startTimer() { 
 
    if (!interval) { 
 
     interval = setInterval(function(){ 
 
      if (remaining % 1000 === 0) 
 
       $('#time').html(time++); 
 
      remaining -= 100; 
 
      }, 100); // 100 w/ modulo instead of 1000 for better precision 
 
     barAnimation(); 
 
    } 
 
} 
 

 
function stopTimer() { 
 
    $('#timebar').stop(); 
 
    clearInterval(interval); 
 
    interval = false; 
 
} 
 

 
function barAnimation() { 
 
    $("#timebar").animate({ width: "0%" }, remaining, "linear"); 
 
}

#timebar { 
 
    background-color: black; 
 
    width: 100%; 
 
    height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="start">Start</button> 
 
<button id="stop">Stop</button> 
 
<div id="time">0</div> 
 
<div id="timebar"></div>

來源

2015-04-30 22:38:32

停止javascript定時器和動畫並恢復它們

回答

相關問題