HOWTO · JavaScript

在 JavaScript 中暫停一個時間段

JavaScript 沒有任何內建屬性或方法來執行播放暫停任務直到某個時間範圍。在這種情況下，我們使用 window.setInterval() 方法和一個在某些條件語句上播放和暫停的函式。另一種方法是使用 jQuery 跟進類似的路徑。

作者 Anika Tabassum Era發佈於 2022-05-10更新於 2023-10-12

本頁內容

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

輸出：

使用 setInterval 方法暫停時間間隔

正如所見，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;
});