在 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 条件，其更改会切换暂停时间流的动作。
