send alert after 5 seconds, 15 seconds... using a timer

Question

I've made a timer but I need something to happen every 5 or 10 seconds. I don't want to use a setTimeout or setInterval function, but when I use this timer, I don't know how to address the value of seconds. should it be written like 5000 or something else?

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

All you need to do is to change the 1000 to a 5000 millisecond interval, in both places where you use setTimeout. Don't use setInterval, whatever you do. Use either setTimeout or requestAnimationFrame. Preferably requestAnimationFrame, but if you do that, you'll need to write some code to manage when you do processing based on the tick difference of the frames. — ManoDestra, Apr 18 '16 at 18:31
@ManoDestra Not saying setInterval is the solution, but I am curious as to why you say "don't use setInterval, whatever you do"? — mhodges, Apr 18 '16 at 18:32
setInterval runs code regardless of whether it has completed on each tick or not. It can easily ramp up calls on the browser's stack and it is then prone to terrible performance issues. You should only ever use setTimeout, or preferably requestAnimationFrame, where possible. If you're only doing something very light and your interval is not too low, then it's probably ok, but I'd still use setTimeout over setInterval every time. Your code here is largely fine though, just change your millisecond interval and you don't then need to check for time differences :) — ManoDestra, Apr 18 '16 at 18:35
@ManoDestra that 1000 interval is just showing the new time every 1 second. my issue is confirming the time. I want a function to happen if certain conditions are met in 5 seconds, and next if it happens in 10 seconds. right now I'm justing an alert. but for some reason writing timeDiff == 5 makes the alert pop up when the page first loads — eyemohini, Apr 18 '16 at 18:41
In that case, I'd use requestAnimationFrame (or setTimeout) and check when you've passed 1 and 5 second intervals to both update your second display and to do your alert (bear in mind that alert will pause execution). — ManoDestra, Apr 18 '16 at 18:43
@ManoDestra sorry I'm not really familiar with requestAnimationFrame, window.requestAnimationFrame(timeDiff)? — eyemohini, Apr 18 '16 at 19:01
Sure there is. If you are using [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame), then just store the delta difference of each tick, until it exceeds 5000, then subtract 5000, do your processing and repeat. If you're using setTimeout with an interval of 1000, then you merely need to increment a tick counter, until it reaches 5, subtract 5, do your processing and repeat. Or just check for modulus of 5, if you're feeling lazy :-p I can write up answer for you, using requestAnimationFrame, if you wish :) — ManoDestra, Apr 18 '16 at 19:52

score 0 · Answer 1 · answered Apr 18 '16 at 19:00

Your code seems to be alright.. If its working for timer, then the only thing you need to do is to move the condition check for timeDiff inside your display function in the following way :

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

send alert after 5 seconds, 15 seconds... using a timer

1 Answers1