I’m learning js and struggling with some very basic things; the forum seemed welcoming, as well as the excellent tutorials and books from Kirupa, reason why I decided to join the forum and ask my first question. Please be nice
I can use this tutorial as start point:
The post is an excellent, albeit simple example of how to use canvas to make some cool animations.
I was wondering though, if it was possible to control the watch hands individually; I understand that in this case every time that
displayTime()
is called from
function startTimer() {
setInterval(displayTime, 1000);
displayTime();
}
it will update the variables responsible for representing the seconds, minutes and hours, allowing the hands to be draw, every second.
What if I wanna the seconds hand to continue the normal ticking (every second), but wanna be able to control independently the other hands (advance in fast forward, hold, etc). Is it possible to define one setInterval for each hand, with different time update intervals? The use of multithread (webworkers) could work to provide the idea of the tree hands working independently?
Sorry for the roughness of the questions. Look forward to improve from our discussion. Cheers.
You can definitely have multiple setIntervals, one for each hand. That is the most direct way to accomplish what you are trying to do! There are other approaches you can take where you can just use one setInterval and adjust when some parts of code within it run based on a counter. Here is an example:
var counter = 0;
function tick() {
console.log("Every second!");
// gets called every 2 seconds
if (counter % 2 == 0) {
console.log("Every other second!");
}
// gets called every 3 seconds
if (counter % 3 == 0) {
console.log("Every other OTHER second!");
}
counter++;
}
setInterval(tick, 1000);
Hi Kirupa; thank you for the very welcoming reception and for replying the question.
I saw that you’ve used an example using setInterval, and I’ve seen some codes using setTimeout. What is the difference between them ?? Why do you prefer it??
Hi @prg9. Thanks for the article, its perfect!! Congratulations @Kirupa for the amazing class! I will adjust my code and let you know as soon as there are other questions.
I have some new questions on my js watch.
a) I’ve included a background image, which is loaded first. However, 30% of the times I reload my browser, the image is now shown; I have no errors in console and dont believe the adblocker is blocking the image, since it loads the rest 70% of the times. Any clue??
b) don’t know if this is related with a), but I have replaced the canvas hands with image hands, which I’ve created in Ilustrator and exported as PNG images with transparency. The images are pre-loaded before, in the beginning of the code. The run() function is located in the bottom of the js script and used to call each hand timer, which is, among other things, responsible for drawing the hands, but something funny is happening in this drawing and is related with the order that those timers are called. If the secondTimer() function is called first, as in example 1, all the hands are shown in every second, but the second hand (image) appears below the other hands.
function run(){ secondTimer(); minuteTimer(); hourTimer();}
if I place the secondTimer() to be called last (see example 2 below) in order that it draw the second hand in the top of the other hands, as it should - or I would like, so only this hand is shown in every update of the watch.
function run(){ minuteTimer(); hourTimer(); secondTimer();}
I know the whole code is not provided (so far is very sketchy) but if possible I would appreciate very much some light here. Thanks!
