如何在 JavaScript 中将倒数计时器与 setTimeOut 函数同步答案

【问题标题】：How to synchronize countdown timer with setTimeOut function in JavaScript如何在 JavaScript 中将倒数计时器与 setTimeOut 函数同步
【发布时间】：2019-03-02 21:48:05
【问题描述】：

我有一个简单的引导页面。这是孩子们必须回答定时测验的更大项目的开始。此处列出了整个页面。

到目前为止，我的代码有两个问题。第一个问题是 Timer 与 setTimeOut() 函数不同步。按照这种方式，孩子们将有 45 秒的时间间隔来回答每个问题。倒计时计时器将显示在按钮的顶部，指示还剩多少时间。而且，在后台，setTimeOut() 将在 45 秒后终止测验。

我的第一个问题是，一旦测验在设计的 45 秒后终止，倒数计时器不会停止，而是将自身重置为另一个 45 秒并继续运行。在这一点上，我希望倒计时结束后，会出现以下“--:--”符号来代替计时器，表示没有更多时间了。

我遇到的第二个问题是，如果孩子们愿意，我希望通过在 45 秒间隔内再次单击按钮来重置时间。这适用于倒数计时器，但不适用于 setTimeOut 函数，它将在 45 秒后终止，并且不会像计时器一样重置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<!-- Bootstrap -->
<link href="css/bootstrap-4.2.1.css" rel="stylesheet">
<style>
.TopDivMarg {
    margin-bottom: 50px;
}
</style>
</head>
<body>
<!-- body code goes here -->

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12 TopDivMarg"></div>
  </div>

<!--    Quiz Group  -->

  <div class="row">
    <div class="col-xl-4"></div>
    <div class="col-xl-4">
      <p id="message" class="text-center">[Click on Button to Start Quiz.]</p>
        <p id="time"></p>
    </div>
    <div class="col-xl-4"></div>
  </div>

<!--    Button Group  -->
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4">
      <button type="button" id="myBtn" class="btn btn-info">Start Quiz</button>
    </div>
    <div class="col-md-4"></div>
  </div>

<script>

  document.getElementById("myBtn").addEventListener("click", function(){
  document.getElementById("message").innerHTML = "What are the colors of the rainbow?";
  errorTimer();
  setTimeout(clearResultF, 45000);
});

// Visible Countdown Timer 
    var timerId;
    function startTimer(duration, display) {

    var timer = duration, minutes, seconds;
    if(timerId != undefined) {
        clearInterval(timerId)
    };

        timerId = setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;
        if (--timer < 0) {
            timer = duration;
        };
    }, 1000);
    };

    function errorTimer () {

        var fortyFiveSeconds = 60 * .75,
        display = document.querySelector('#time');
        startTimer(fortyFiveSeconds, display);
        };

    // Reset Timer

      function clearResultF() {
      document.getElementById("message").innerHTML = "[Click on the Button to Start the Quiz.]";
      };

</script>

【问题讨论】：

标签： javascript html twitter-bootstrap settimeout countdowntimer

【解决方案1】：

我的第一个问题是，一旦测验在设计的 45 秒后终止，倒数计时器不会停止而是将自身重置为另一个 45 秒并继续运行

通过设计一个 javascript interval 事件，同时永远持续下去。虽然您只是重置计时器变量，但间隔永远运行的事实没有任何其他事情发生。为了阻止它，您需要清除它（就像您在 startTimer 方法的开头所做的那样。我建议更新此代码：

display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
    timer = duration;
    clearInterval(timerId)
};

这适用于倒数计时器，但不适用于 setTimeOut 函数，它将在 45 秒后终止，并且不会像计时器一样重置。

出于与间隔事件相同的原因，如果您希望停止超时，则需要将其清除（因此将其存储在一个变量中，以便您可以在需要时清除它的 id）。

我可能指出的一个设计问题是超时设置应该发生在startTimer 方法中，以便您可以在同一个地方管理所有计时器。我建议进行以下更新：

var timerId;
var countId;

function startTimer(duration, display) {

    var timer = duration, minutes, seconds;

    if(timerId != undefined) {
        clearInterval(timerId)
    };
    if(countId!= undefined) {
        clearTimeout(countId)
    };

    countId = setTimeout(clearResultF, 45000);
    timerId = setInterval(function () { ...

【讨论】：

感谢 hugodecasta 的帮助。第一个问题完全解决了。但是第二个没有解决。我不确定我是否进行了必要的更正。
这里是我如何存储 setTimeOut 函数是一个变量 var counter = setTimeout(clearResultF, 45000);
@Hassan，是的，可能有问题。当您存储变量时，请确保不要在其前面使用var 字样，否则 JS 将创建一个您以后无法清除的新变量。根据您的设计，确保计数器变量是全局变量（通过与timerId 相同的方式声明它），以便您的所有代码都可以访问它（您可以设置它counter = setTimeout(clearResultF, 45000; 并清除它@987654329 @)
那行得通。非常感谢您对此事的解释和帮助。非常感谢您的指导。