在 5 秒、15 秒后发送警报……使用计时器答案

【问题标题】：send alert after 5 seconds, 15 seconds... using a timer在 5 秒、15 秒后发送警报……使用计时器
【发布时间】：2016-04-18 18:15:36
【问题描述】：

我已经制作了一个计时器，但我需要每 5 或 10 秒发生一次。我不想使用 setTimeout 或 setInterval 函数，但是当我使用这个计时器时，我不知道如何处理秒的值。应该写成 5000 还是别的什么？

function display(){
    var endTime = new Date();
    var timeDiff = endTime - startTime;
    timeDiff /= 1000;

    var seconds = Math.round(timeDiff % 60);
    timeDiff = Math.floor(timeDiff / 60);

//showing the seconds passed
    $("#time").text(seconds);
    setTimeout(display,1000);
}

//starts the timer
$("#start").click(function() {
     startTime = new Date();
     setTimeout(display,1000);
});

/confirms it is 5 seconds
if (timeDiff == 5){
    alert('now');
}

【问题讨论】：

您需要做的就是在使用 setTimeout 的两个地方将 1000 更改为 5000 毫秒间隔。无论您做什么，都不要使用 setInterval。使用 setTimeout 或 requestAnimationFrame。最好是requestAnimationFrame，但是如果你这样做，你需要编写一些代码来管理你在处理时根据帧的tick差异。
@ManoDestra 不是说 setInterval 是解决方案，但我很好奇你为什么说“不要使用 setInterval，不管你做什么”？
setInterval 运行代码，无论它是否在每个刻度上都已完成。它可以轻松地增加浏览器堆栈上的调用，然后很容易出现可怕的性能问题。您应该只在可能的情况下使用 setTimeout，或者最好使用 requestAnimationFrame。如果你只是做一些非常轻的事情并且你的间隔不是太低，那么它可能没问题，但我仍然会每次都使用 setTimeout 而不是 setInterval 。不过，您的代码在很大程度上很好，只需更改您的毫秒间隔，您就不需要检查时差:)
@ManoDestra 1000 间隔只是每 1 秒显示一次新时间。我的问题是确认时间。如果在 5 秒内满足某些条件，我希望一个函数发生，如果它在 10 秒内发生，则下一个函数发生。现在我只是一个警报。但由于某种原因，编写 timeDiff == 5 会在页面首次加载时弹出警报
在这种情况下，我会使用 requestAnimationFrame（或 setTimeout）并检查您何时通过 1 秒和 5 秒的时间间隔来更新您的第二个显示并发出警报（请记住警报将暂停执行）。

标签： jquery timer elapsed

【解决方案1】：

您的代码似乎没问题.. 如果它适用于计时器，那么您唯一需要做的就是通过以下方式在显示函数中移动 timeDiff 的条件检查：

<html>

<head>
  <script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
  <script>
    $(document).ready(function(e) {


      var prevSec = 0,
        totalTime = 0;

      function display() {
        var endTime = new Date();
        var timeDiff = endTime - startTime;
        timeDiff /= 1000;

        var seconds = Math.round(timeDiff % 60);
        timeDiff = Math.floor(timeDiff / 60);

        //showing the seconds passed
        $("#time").text(seconds);
        //confirm it is 5 seconds
        if (seconds - prevSec == 5) {
          prevSec = seconds;
          totalTime = totalTime + 5;
          $("#text2").text("Another round of 5 seconds is over. Total time : " + totalTime + " seconds");
          // Do whatever you want

        }

        setTimeout(display, 1000);
      }

      //starts the timer
      $("#start").click(function() {
        startTime = new Date();
        setTimeout(display, 1000);
      });

    });
  </script>
</head>

<body>
  Time:
  <p id="time"></p>
  <button id="start">start</button>
  <br>
  <br>
  <br>Display Text :
  <p id="text2"></p>
</body>

</html>

【讨论】：