25+5 Clock failing a different amount of tests each time!? PLEASE help

I’m up to the point now where I really cannot see what is the issue with my clock. Here’s my codepen (haven’t styled it yet): https://codepen.io/scott-a-m/pen/ZEKLYgr?editors=0010

Manually all the tests seem to pass. But now, when i test them with the suite, sometimes 23 of them pass, sometimes its 24, 25, 26 or 27 out of 29 :cold_face:. I cannot see what is causing this discrepancy or why any of these errors are arising.

If anyone can help, it would be great :grinning:

The tests for this challenge take a few seconds to complete, you have to wait until the button turns from yellow to red. It looks like you’re passing 27/29.

Something seems to be wrong with your timer code, there is a 1 second delay. When you start the timer, it takes 2 seconds until the display changes.

Thanks for your reply. I was aware of this two-second start a while ago, but when I altered the code to correct this I ended up failing more tests so I originally left it in place and forgot to change it again; thanks for bringing it to my attention.

The delay occurred because it would start at the session length, and because the interval function is every one second it would end up displaying the full length again on the first call, and then deduct and display the length -1 on the second call, which would not be until 2 seconds later. So I have now changed the code again so that it starts at Session length -1 on the first call.

Having now corrected this, unfortunately tests are still failing, I ran them three times, the first 23 passed, the second 25 passed and the third 23 passed. I did wait until the button turned red.

Any other ideas what the issue may be? Many Thanks!

I ran the test three times and you’re right, the number of passing tests changes (I got 26, 26, then 25). This means that your code sometimes updates the values fast enough, sometimes it’s too slow. For the human eye, your clock seems to be working as it should, but the tests crank up the interval time when they run, you can see that when you give your clock a margin-left of ~ 400px (right now the whole clock is covered by the test suite).

That whole block of code inside the setInterval callback runs every second in normal mode and every 30 milliseconds in test mode. If those 30 milliseconds aren’t enough for your state to update, it lets the tests fail (state updates don’t happen immediately). I’d first try to make that block of code as efficient with as little state updates as possible.

Very interesting; thank you for this advice. I am somewhat new to React and understand that there are some limitations to state updates if time precision is imperative:

https://ozmoroz.com/2018/11/why-my-setstate-doesnt-work/

If this is the case, am I best to remove some of the state properties and create global variables instead which are updated instantaneously?

For instance, instead of this.state.timeLeft I could have a global variable called timeLeft

Using some global variable may seem like a good solution, especially when you’re used to doing these things in Vanilla JS, but it’s not how you would handle it in React. You definitely want to use state.

I suspect you’re making too many unnecessary state updates within your timer callback. For example, you have a method reset() that puts the state back to initial. But in your timer, you also have an if condition that does the exact same updates, plus additionally clears the timer. I’d remove that if condition altogether from the timer and instead make the timerID a state variable, so that the reset() method can call clearTimeout(timerID).

I see what you’re saying here. Thank you :slight_smile:

Thanks a lot for the advice @jsdisco. To reduce the amount of state updates, I had to break down the larger timer function into several smaller more manageable functions. Thanks to @twotani for pointing this out. To do this I examined the FCC model clock, which was very insightful and made some changes based on this; thank you Peter Weinberg for providing this. One of the key ones was to have a separate function to turn the amount of seconds into clock format and put this function into the #time-left element.

I am now passing all 29 tests. Although annoyingly, sometimes when running the tests, one or two still fail. Could this be something to do with the fact that the 1000ms interval is not 100% accurate, i.e. it may fire at 1003ms for example.? Or could it be the server connection at the time? For example, I’ve noticed when the tests complete quickly I pass all 29, but sometimes they take considerably longer to complete, and this is where the errors are sometimes flagged.

The one or two tests which fail:

Here is my revised codepen (renamed pomodoro timer, which I have now started to style): https://codepen.io/scott-a-m/pen/oNWEmzv

Peter Weinberg has an accurate interval which I believe accounts for this discrepancy; I may consider how this could be incorporated into my code and whether it reduces these occasional errors.

When I ran your code, I get this error (and this error only).

When a countdown reaches zero (NOTE: timer MUST reach 00:00), a sound indicating that time is up should play. This should utilize an HTML5 <audio> tag and have a corresponding id="beep".

I used only the straight setInterval and clearInterval functions so I don’t think you need that level of accurate timer to pass this project.

That is interesting, I never got that error. I changed internet connections and now all tests are passing 99% of the time. I really am not sure what causes that occasional error to occur. Thanks all for the help!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.