CODEWITHSUNDEEP
javascriptfunctionobject
Arnold Dongleman
Arnold Dongleman

Reputation: 11

Creating multiple controllable timers

How would I go about making this whole thing into a function that creates new controllable timers? 

var seconds = 0;
var interval;
//when you want the timer to stop
var endTime = 55;

function checkTimer() {
if (seconds == endTime) {
    restartPause();

}};

//reset timer
function restart() {
pause();
seconds = 0; interval = setInterval(function() {console.log(seconds); seconds++; checkTimer()}, 1000);
};

//pause timer
function pause() {
  clearInterval(interval);
};

//play timer
function start() {
  pause();
  interval = setInterval(function() {console.log(seconds); seconds++; checkTimer()}, 1000);
};

//Restart and Pause, for when the video ends
function restartPause() {
restart();
pause();
};

function timeChange(n) {
seconds = n;
}

Say I want to have the ability to create multiple timers like so

var myTimer = new timer();
var anotherTimer = new timer();
var thirdTimer = new timer();

Upvotes: 0

Views: 78

Answers (3)

Chayim Friedman
Chayim Friedman

Reputation: 71300

You should create "class" (not really class, there aren't classes in ES5, but function that can be used with new. For morer information, see MDN Docs). Then, for any "class" there are member variables that they only of the currenct instnce of that class. For example, for creating class Timer, use the following code:

function Timer() {
  // Private memebers, accessed only inside the class

  var seconds = 0;
  var interval;
  // When you want the timer to stop
  var endTime = 55;

  // Private functions

  var that = this; // For the intervalFunc function, I explained in my comment below
  var intervalFunc = function() {
    console.log(seconds);
    seconds++;
    that.checkTimer();
  };

  // Public functions, acessed to anyone have an instance of the class

  this.checkTimer = function() {
    if (seconds == endTime) {
      this.restartPause();
    }
  };

  // Reset timer
  this.restart = function() {
    this.pause();
    seconds = 0;
    interval = setInterval(intervalFunc, 1000);
  };

  // Pause timer
  this.pause = function() {
    clearInterval(interval);
  };

  // Play timer
  this.start = function() {
    this.pause();
    interval = setInterval(intervalFunc, 1000);
  };

  // Restart and Pause, for when the video ends
  this.restartPause = function() {
    this.restart();
    this.pause();
  };

  this.timeChange = function(n) {
    seconds = n;
  };
}



// Create instances of the class
var t1 = new Timer(), t2 = new Timer();
t1.start(); // t2 doesn't start!
t2.start();
t2.pause(); // t1 doesn't pause!

Edit:

when you're accessing from the class to public member, the this keyword is required! (But no when you're accessing to private members).

Upvotes: 0

Mark
Mark

Reputation: 92450

There are a couple ways to do this. If you are using a browser that can handle ES6 classes, you can make a class that defines all these functions as methods. The traditional way to do this in Javascript is to define a function and then add the other functions to the prototype. You'll need to access the variables and functions with this from the instances. Here's an example that uses a few of your functions that should show how it works:

function Timer(endTime){
    // define instance properties
    this.endTime = endTime;
    this.interval = undefined
    this.seconds = 0
}

// Define methods
Timer.prototype.pause = function() {
    clearInterval(this.interval);
}
Timer.prototype.start = function(){
    this.pause()
    // you should use arrow => functions when passing methods to event handler
    this.interval = setInterval(() => {console.log(this.seconds); this.seconds++; this.checkTimer()}, 1000)
}
Timer.prototype.checkTimer = function() {
    if (this.seconds >= this.endTime) {
        this.pause();
    }
};
Timer.prototype.restart = function() {
    this.seconds = 0; 
    this.start()
};

// create a timer that will stop in 10 and start it
let t = new Timer(10)
t.start()

// create another
let t2 = new Timer(10)
t2.start()

// stop the second one in a few seconds
setTimeout(() => t2.pause(), 3100)

Note that timers are not very accurate, so if you need something with accurate time you might need to look for a different approach.

Upvotes: 1

Artur
Artur

Reputation: 96

 class Timer {
   constructor() {
     this.seconds = 0;
     this.endTime = 55;
     this.interval = null;
   }

   checkTimer() {
     if (this.seconds === this.endTime) {
       this.restartPause();
     }
   }

   restart() {
     this.pause();
     this.seconds = 0;
     this.interval = setInterval(() => {
       console.log(this.seconds);
       this.seconds++;
       this.checkTimer();
     }, 1000);
   }

   pause() {
     clearInterval(this.interval);
   }

   start() {
     this.pause();
     this.interval = setInterval(() => {
       console.log(this.seconds);
       this.seconds++;
       this.checkTimer();
     }, 1000);
   }

   restartPause() {
     this.restart();
     this.pause();
   }

   timeChange(n) {
     this.seconds = n;
   }
 }

 const timer1 = new Timer();
 timer1.start();

 const timer2 = new Timer();
 timer2.start();

Upvotes: 0

Related Questions