在 JavaScript 中暫停一個時間段
JavaScript 中的 setInterval() 方法允許在一段時間後重復任務。沒有這樣的引數可以在該時間範圍內暫停任務。
在這種情況下，我們可以讓 setInterval() 方法具有其他函式作為引數。這些功能將觸發計時器的正常流程以停止或恢復。
以下部分將解釋實現此任務的兩種方法。
我們的第一個動機是使用當前的 JavaScript 語法來解決問題。我們還將瞭解如何使用 jQuery 開發解決方案。
在 JavaScript 中使用 setInterval() 方法暫停時間間隔
在這裡，我們將有一個 h1 標籤，其中包含預定義的文字。我們將確保它有一個 id，因為我們需要抓取 DOM 元素來應用 setInterval() 方法。
下一步是使用兩個按鈕元素，用單獨的函式在點選時啟動。
JavaScript 部分將通過 id 獲取 h1 元素並設定變數 time 以每秒遞增一次（我們將 millisecond 引數分配為 1000）。
讓我們檢查一下程式碼，以瞭解解決方案的情況。
程式碼片段：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
</head>
<body>
<h1 id="h1">Seconds: 0</h1>
<button class="play" onclick="play()">Play</button>
<button class="pause" onclick="pause()">Pause</button>
</body>
</html>
var output = document.getElementById("h1");
var isPaused = false;
var time = 0;
var t = setInterval(function() {
if(!isPaused) {
time++;
output.innerText = "Seconds: " + time;
}
}, 1000);
function play(){
isPaused = false;
}
function pause(){
isPaused = true;
}
輸出：
正如所見，play() 和 pause() 函式將根據條件將標誌變數 isPaused 設定為布林值，因此 output.innerText() 將在時間流的中間。
在 jQuery DOM 元素抓取器上使用 JavaScript getElementById() 方法效率更高。它更快，並且不需要另一個包裝層。
在 JavaScript 中使用 jQuery 和 setInterval() 暫停間隔
jQuery 設定時間間隔的方式也很流行，除了語法和敏捷性略有變化外，整體驅動是一樣的。
在這裡，我們不會為播放和暫停按鈕使用 onclick 屬性，但這些按鈕將在 JavaScript 部分中有一個 jQuery 函式來定義活動。
檢視下面的程式碼行以獲得清晰的描述。
程式碼片段：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Seconds: 0</h1>
<button class="play">Play</button>
<button class="pause">Pause</button>
</body>
</html>
var output = $('h1');
var isPaused = false;
var time = 0;
var t = window.setInterval(function() {
if(!isPaused) {
time++;
output.text("Seconds: " + time);
}
}, 1000);
$('.pause').on('click', function(e) {
e.preventDefault();
isPaused = true;
});
$('.play').on('click', function(e) {
e.preventDefault();
isPaused = false;
});
輸出：
我們在 setInterval() 方法之前明確提到了 window 物件。它的工作原理類似，但也沒有提及 window 物件。
整個任務基於變數 isPause 條件，其更改會切換暫停時間流的動作。
