Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Fix time tracking stopwatch lag
Prior to this, the stopwatch was lagging behind the real time and it was not
possible to manually edit the time field.

The lag was caused by the use of setTimeout to add to a counter each
second. Browsers put inactive tabs to sleep for a few seconds, causing
cumulative delays between each call to setTimeout.

I have changed setTimeout to setInterval to better express the intention
of calling a function in a loop and inside that function I have switched
from a simple add to a counter, to calculate the diff in seconds between
startTime and current time, using the moment.js library to help.

Fixes #22919

Signed-off-by: Damien Regad <dregad@mantisbt.org>
  • Loading branch information
EthraZa authored and dregad committed Aug 17, 2017
1 parent 224e4fb commit 85484ea
Showing 1 changed file with 43 additions and 32 deletions.
75 changes: 43 additions & 32 deletions js/common.js
Expand Up @@ -168,60 +168,71 @@ $(document).ready( function() {
}

var stopwatch = {
timerID: null,
elapsedTime: 0,
timerID: 0,
startTime: null,
zeroTime: moment('0', 's'),
tick: function() {
this.elapsedTime += 1000;
var seconds = Math.floor(this.elapsedTime / 1000) % 60;
var minutes = Math.floor(this.elapsedTime / 60000) % 60;
var hours = Math.floor(this.elapsedTime / 3600000) % 60;
if (seconds < 10) {
seconds = '0' + seconds;
}
if (minutes < 10) {
minutes = '0' + minutes;
}
if (hours < 10) {
hours = '0' + hours;
}
$('input[type=text].stopwatch_time').val(hours + ':' + minutes + ':' + seconds);
this.start();
var elapsedDiff = moment().diff(this.startTime),
elapsedTime = this.zeroTime.clone().add(elapsedDiff);

$('input[type=text].stopwatch_time').val(elapsedTime.format('HH:mm:ss'));
},
reset: function() {
this.stop();
this.elapsedTime = 0;
$('input[type=text].stopwatch_time').val('');
},
start: function() {
var self = this,
timeFormat = '',
stoppedTime = $('input[type=text].stopwatch_time').val();

this.stop();
var self = this;
this.timerID = window.setTimeout(function() {

if (stoppedTime) {
switch (stoppedTime.split(':').length) {
case 1:
timeFormat = 'ss';
break;

case 2:
timeFormat = 'mm:ss';
break;

default:
timeFormat = 'HH:mm:ss';
}

this.startTime = moment().add(this.zeroTime.clone().diff(moment(stoppedTime, timeFormat)));
} else {
this.startTime = moment();
}

this.timerID = window.setInterval(function() {
self.tick();
}, 1000);

$('input[type=button].stopwatch_toggle').val(translations['time_tracking_stopwatch_stop']);
},
stop: function() {
if (typeof this.timerID == 'number') {
window.clearTimeout(this.timerID);
delete this.timerID;
if (this.timerID) {
window.clearInterval(this.timerID);
this.timerID = 0;
}

$('input[type=button].stopwatch_toggle').val(translations['time_tracking_stopwatch_start']);
}
};

$('input[type=button].stopwatch_toggle').click(function() {
if (stopwatch.elapsedTime == 0) {
stopwatch.stop();
if (!stopwatch.timerID) {
stopwatch.start();
$('input[type=button].stopwatch_toggle').val(translations['time_tracking_stopwatch_stop']);
} else if (typeof stopwatch.timerID == 'number') {
stopwatch.stop();
$('input[type=button].stopwatch_toggle').val(translations['time_tracking_stopwatch_start']);
} else {
stopwatch.start();
$('input[type=button].stopwatch_toggle').val(translations['time_tracking_stopwatch_stop']);
stopwatch.stop();
}
});

$('input[type=button].stopwatch_reset').click(function() {
stopwatch.reset();
$('input[type=button].stopwatch_toggle').val(translations['time_tracking_stopwatch_start']);
});

$('input[type=text].datetimepicker').each(function(index, element) {
Expand Down

0 comments on commit 85484ea

Please sign in to comment.