Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/erikwittern/timer.js
Timer.js is a small JavaScript library to set up and handle timed events.
https://github.com/erikwittern/timer.js
Last synced: 13 days ago
JSON representation
Timer.js is a small JavaScript library to set up and handle timed events.
- Host: GitHub
- URL: https://github.com/erikwittern/timer.js
- Owner: ErikWittern
- Created: 2013-04-21T09:24:34.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2014-03-05T10:27:36.000Z (almost 11 years ago)
- Last Synced: 2024-10-12T01:30:54.214Z (3 months ago)
- Language: JavaScript
- Size: 137 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
timer.js
========
Timer.js is a small JavaScript library to set up and handle timed events.
# Dependencies
Timer.js requires underscore.js and jquery.js.
# Usage
## Initialize timer
Initialize a new timer in the following way:
```javascript
var timer = new Timer();
```
If desired, provide an HTML element where to display the stopwatch in format 'mm:ss':
```html
```
```javascript
var timer = new Timer('#output');
```
## Add events
Each event is provided with an id and with the time of occurrence in seconds.
```javascript
timer.addEvent("event_a", 1);
timer.addEvent("event_b", 4);
timer.addEvent("event_c", 5);
```
Events can also be removed.
```javascript
timer.removeEvent("event_b");
```
## React to events
Subscribe to "timedEvent" to set up handler for any event. The callback will get the event object (probably irrelevant) and the id provided for the event originally.
```javascript
var subscription = timer.subscribe('timedEvent', function(e, identifier){
console.log(identifier); // will output "event_a" after 1 second and "event_c" after 5 seconds
});
```
You can also subscribe to an individual event using its identifier:
```javascript
var subscriptionIndividual = timer.subscribe('event_a', function(e){
console.log("event_a");
});
```
You can also unsubscribe from events:
```javascript
timer.unsubscribe(subscription);
```
## Control timer
You can control the timer in the following way:
```javascript
timer.start() // starts timer initially or resumes stopped timer
timer.stop() // stops running timer
timer.reset() // resets timer to 0 - already fired events will be fired again
```
## UI control of timer (optional)
To illustrate the usage of timer.js in combination with UI elements, consider the following example:
Set up the html:
```html
Start
Reset
```
Use jQuery to allow users to start/stop the timer:
```javascript
$('#start-stop-btn').click(function(){
if(timer.isRunning()){
timer.stop();
$('#start-stop-btn').html("Resume");
} else {
timer.start();
$('#start-stop-btn').html("Pause");
};
});
```
Allow users to reset the timer:
```javascript
$('#reset-btn').click(function(){
timer.reset();
});
```