Question

我有一个简单的引导页面。这是针对儿童的大型项目的开始，他们必须回答定时测验。整个页面在此处列出。

到目前为止，我的代码有两个问题。第一个问题是计时器未与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>

Answer 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 () { ...

如何在Javascript中将倒数计时器与SetTimeOut函数同步

1 个答案: