How to timer in Javascript

Asked

Viewed 11,228 times

7

I need help to make a timer for a page, and it has to be different for every difficulty of a game, for example, for easy mode it has 1 minute, for intermediate it has 4 minutes, and for hard 8 minutes.

javascript timer

3 answers

13


You can make an object Timer and then create new instances each time you need it. For example:

var button = document.querySelector('button');
var mostrador = document.querySelector('#mostrador');

button.addEventListener('click', function() {
    new Timer(1, mostrador, function() {
        alert('O tempo acabou!');
    }).start();
});

function Timer(mins, target, cb) {
    this.counter = mins * 60;
    this.target = target;
    this.callback = cb;
}
Timer.prototype.pad = function(s) {
    return (s < 10) ? '0' + s : s;
}
Timer.prototype.start = function(s) {
    this.count();
}
Timer.prototype.stop = function(s) {
    this.count();
}
Timer.prototype.done = function(s) {
    if (this.callback) this.callback();
}
Timer.prototype.display = function(s) {
    this.target.innerHTML = this.pad(s);
}
Timer.prototype.count = function(s) {
    var self = this;
    self.display.call(self, self.counter);
    self.counter--;
    var clock = setInterval(function() {
        self.display(self.counter);
        self.counter--;
        if (self.counter < 0) {
            clearInterval(clock);
            self.done.call(self);
        }
    }, 1000);
}
<div id="mostrador"></div>
<button>1 minuto</button>

jsFiddle: https://jsfiddle.net/34t7bcrb/

  • I wanted a timer that when pressing the play button of the game began to make the countdown from the 8 minutes for example. And to appear on the page that same timer as if it were a stopwatch

  • @py_9 is what I offered you :) You can adapt the rest or you need help with the details?

  • needed help with the details if you could

  • 1

    @py_9 is what you’re looking for? https://jsfiddle.net/34t7bcrb/1/

3

You can use the function setInterval

  setInterval(function(){
    alert("Olá"); 
  }, 2000);

Between the keys put the action you want to execute (an Alert in the example). and after the lock key specify the time in milliseconds and each time this count is complete (2 seconds in the example) it calls the desired action.

Fiddlejs with example.

  • Thanks, and how do I show the timer on the page to actually see the timer doing Countdown @pmargreff

  • It is counting, what you can do if you want to display on the screen is update another variable from second to second using the same function and display it. You can even make another variable that updates from second to second and put a counter inside its function to update only until the second you want. I think this solution is better because it would help you with the purpose of the question and also as the one of the comment.

  • I wanted a timer that when pressing the play button of the game began to make the countdown from the 8 minutes for example. And to appear on the page that same timer as if it were a stopwatch

2

Two simple options (2000 ms):

requestAnimationFrame

[requestAnimationFrame] Tells the browser that you Wish to perform an Animation and requests that the browser call a specified Function to update an Animation before the next repaint.

window.requestAnimationFrame(loop);
var timer_RAF = performance.now();
function loop (){
  passed = performance.now() - timer_RAF;
  if(passed >= 2000){
    console.log('requestAnimationFrame', passed);
    timer_RAF= performance.now();
    // seu codigo a ser executado a cada 2000ms
  }
  window.requestAnimationFrame(loop);
}

setInterval

var timer_interval = performance.now();
setInterval(function(){
    console.log('setInterval', performance.now() - timer_interval);
    timer_interval = performance.now();
    // seu codigo a ser executado a cada 2000ms
 }, 2000);

Browser other questions tagged javascript timer

You are not signed in. Login or sign up in order to post.