在 JavaScript 中暫停一個時間段

Anika Tabassum Era 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中使用 setInterval() 方法暫停時間間隔
  2. 在 JavaScript 中使用 jQuery 和 setInterval() 暫停間隔
在 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;
}

輸出:

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

輸出:

使用 jQuery 和 setInterval 暫停間隔

我們在 setInterval() 方法之前明確提到了 window 物件。它的工作原理類似,但也沒有提及 window 物件。

整個任務基於變數 isPause 條件,其更改會切換暫停時間流的動作。

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook

相關文章 - JavaScript SetInterval