在 JavaScript 中暂停一个时间段

JavaScript 1年前 195

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

输出：

在 JavaScript 中暂停一个时间段

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