google.setOnLoadCallback(function () {
rg.app.init();
});
var rg = {
counter: 0,
countUp: true,
target: 0,
chrome: {
hour: $('#countdown .hour'),
minute: $('#countdown .minute'),
second: $('#countdown .second'),
answer: $('#answer'),
comment: $('#comment')
},
helpers: {
two: function (n) {
return ((n > 9) ? '' : '0') + n;
},
three: function (n) {
return ((n > 99) ? '' : '0') + ((n > 9) ? '' : '0') + n;
}
},
app: {
init: function () {
setInterval(rg.app.tick, 1000);
},
sync: function () {
$.getJSON('counts.json', function (data) {
rg.chrome.answer.text(data.answer);
rg.chrome.comment.text(data.comment);
var c = data.countdown;
rg.counter = (((c.hour * 60) + c.minute) * 60) + c.second;
});
},
tick: function () {
if (rg.counter === rg.target) {
rg.app.sync();
}
if (rg.countUp) {
rg.counter = rg.counter + 1;
} else {
rg.counter = rg.counter - 1;
}
rg.app.updateScreen();
},
updateScreen: function () {
var offset = rg.counter;
offset = offset / 60 / 60;
rg.chrome.hour.text(rg.helpers.three(Math.floor(offset)));
offset = (offset - Math.floor(offset)) * 60;
rg.chrome.minute.text(rg.helpers.two(Math.floor(offset)));
offset = (offset - Math.floor(offset)) * 60;
rg.chrome.second.text(rg.helpers.two(Math.floor(offset)));
}
}
};
Refactorings
No refactoring yet !
ravinggenius
July 25, 2009, July 25, 2009 23:16, permalink
No rating.
Login to rate!
I have found the problem; the rg.chrome object members couldn't be set until jQuery was loaded, and they were getting null references. Anyway it does count down, but it still hangs for a moment and them skips displaying a second or two. How can I make this faster or more efficient? I think the problem is in rg.app.updateScreen(). Any takers?
$(document).bind('ready', function () {
rg.app.init();
});
var rg = {
config: {
counter: 0,
countUp: false,
interval: 1000,
target: 0
},
chrome: {},
helpers: {
two: function (n) {
return ((n > 9) ? '' : '0') + n;
},
three: function (n) {
return ((n > 99) ? '' : '0') + ((n > 9) ? '' : '0') + n;
}
},
app: {
init: function () {
rg.chrome.answer = $('#answer');
rg.chrome.comment = $('#comment');
rg.chrome.hour = $('#timer .hour');
rg.chrome.minute = $('#timer .minute');
rg.chrome.second = $('#timer .second');
setInterval('rg.app.tick()', 1000);
},
sync: function () {
$.getJSON('counts.json', function (data) {
rg.chrome.answer.text(data.answer);
rg.chrome.comment.text(data.comment);
var c = data.countdown;
rg.config.counter = (((c.hour * 60) + c.minute) * 60) + c.second;
});
},
tick: function () {
if (rg.config.counter === rg.config.target) {
rg.app.sync();
}
if (rg.config.countUp) {
rg.config.counter = rg.config.counter + 1;
} else {
rg.config.counter = rg.config.counter - 1;
}
rg.app.updateScreen();
},
updateScreen: function () {
var offset = rg.config.counter;
offset = offset / 60 / 60;
rg.chrome.hour.text(rg.helpers.three(Math.floor(offset)));
offset = (offset - Math.floor(offset)) * 60;
rg.chrome.minute.text(rg.helpers.two(Math.floor(offset)));
offset = (offset - Math.floor(offset)) * 60;
rg.chrome.second.text(rg.helpers.two(Math.floor(offset)));
}
}
};
I recently read the book JavaScript: The Good Parts. After reading the book, my existing JS wasn't very pretty. Since it was horribly slow, I decided to refactored to remove the "class" and all but one global variable. However now the countdown doesn't work at all. Everything looks correct to me; what did I do wrong?
By the way, the project it now on GitHub (http://github.com/ravinggenius/weekend/tree/master). Also I am using jQuery and Google's ajax api loader.