Solve the pesky "return to zero" problem

- [Instructor] If you want the second hand to skip the way you see right now the function we created is just fine. However, if you want this fancy animation to happen we need to solve that problem of the arm returning to zero every time it reaches the top of the clock. As I explained in the previous movie this returning to zero thing is happening because every second we query the date object and then we set the second, minute, and hour values and every time the second hand reaches the top second is reset to zero so the position of the second object is zero and on the degree table we return to zero meaning the arm will run backwards up to the top.

This will also happen to hours and minutes. So the script under these circumstances simply doesn't work. We need to change the logic. Here's what we're going to do. First we'll grab the date object and these lets for hour, minute, and second and hour position, minute position, and second position and place them outside the function. That means when the script first loads in the browser it will grab the current date and time and set the arm positions, but the arms are no longer moving, because we're not incrementally increasing the arm position.

The next step is to figure out exactly how many degrees each of these arms should move inside the run the clock function, because we're no longer relying on the dates to tell us that position. We have to do this using pure math. We'll do that right above the declaration for where the positions are, because we need to incrementally increase it before the arms are positioned, otherwise everything will be one second behind the real clock. Here I'll take sec position first, because it's the easiest to understand.

I grab the current value of sec position then I add the number of degrees necessary to display one additional second. So we already know that the clock face has 360 degrees then we divide 360 degrees by 60 seconds and if you do that math on a calculator you'll find out that equals six degrees. Next we'll take min position. Again we grab the existing value of min position and the minute arm moves the distance of one second over 60 seconds, so we're looking for one sixtieth of the degrees of the second hand.

That will look something like this (1/60)*6 which we can shorthand to just (6/60). Then finally we have the hour position. Again we grab the existing hour position and this arm moves the distance of one hour so 360 over 12, which is 30 over 3,600 seconds, that's how many seconds are in an hour.

So we end up with (30/3600) then we can just do some math and take the zeros away and we end up with (3/360). Save this, go back in the browser, and now the second hand keeps moving when it gets to the top of the clock. So now the clock is working exactly as expected and we don't have that weird return to zero thing happen for any of the arms. There is one downside to this, though, we're no longer relying on the date object to constantly update the time. Instead we're handing that task over to the browser and that means if the browser throttles the Java script, meaning slowing it down when we're not focusing on it or maybe stops the Java script all together we'll lose track of time and the clock will be completely wrong.

You can kind of see this if I go to a separate tab for a second here. So we'll just sit on this tab, play around and spend some time and then we'll return to the tab and the clock has to catch up with the time because the Java script was being throttled by the browser. Browsers are throttling Java script more and more so this might be a bigger issue in the future. So here you have to make a choice. Do you want the animation? In that case you have to rely on the browser to do the math to figure out exactly where these arms are positioned. If on the other hand you are fine with the ticking position then you can return to the old script where we query the date object every time we update the clock and you'll always have the correct positioning no matter what happens in the browser.

This is in a very real sense an aesthetic choice so you can choose one or the other. They both work fine and they both have benefits and drawbacks. The reason I'm showing you both is I want you to start thinking about how the logic of your script impacts the results. Here you see changing the logic of the script has a significant impact on the result and sometimes you have to play around with your code to get the right logic and place the items in the right order. For example, if I grab this update code here and place it underneath the positioning of the arms the clock will be a second behind.

I could then solve that by adding a second to the second value at the top here, but that gets very convoluted and weird. So think carefully about where you position your arguments and how you structure your logic and test out different things to see how they impact the end results.