search

olton / Metro-UI-CSS

Impressive component library for expressive web development! Build responsive projects on the web with the first front-end component library in Metro Style. And now there are even more opportunities every day!
http://metroui.org.ua/
MIT License
7.02k stars 1.97k forks source link

Countdown component counts 2 seconds at once at the beginning #1931

Open netfaresi opened 6 months ago

netfaresi commented 6 months ago

Describe the bug Countdown component counts down 2 seconds at once at the beginning.

To Reproduce I use version 4.5.2 but it can be also observed on the official documentation page.

Expected behavior The component should count down only one second at the beginning.

Desktop (please complete the following information):

olton commented 6 months ago

Try latest 4.5.12-rc11 (npm) or dev (4.15.12-rc12) from github

netfaresi commented 6 months ago

Thank you for the feedback.

Unfortunately the bug exists in the dev version, too. On the offical MetroUI documentation page the bug can be seen too.

netfaresi commented 6 months ago

UPDATE I tested it on my smartphone too and again the same result.

I tried to use another countdown timer and found this one from W3Schools:

https://www.w3schools.com/howto/howto_js_countdown.asp

I observed similar problem in this implementation. When I set the time for example to 10 seconds the countdown starts at 8. In order to exclude possible page load delay I put the code into a function and called it manually after the page hase been loaded. But still the same problem. The displayed values was always 2 seconds lower than configured value.

The difference between the W3schools version and Metro UI component is, Metro UI component shows at the start the correct count down time for example 10 and then jumps to 8 at first count. The W3schools version starts at 8 but counts correctly at first tick.

netfaresi commented 6 months ago

SOLUTION

It looks like there is a delay longer than 1 second during initial rendering of the value. I realized it while testing the W3Schools version of code. I configured the countdown to 22 seconds and logged each time the milliseconds which are used to calculate the remaining time parts. I saw:

22000 20982 19989 ...

Because Math.floor was used, the value 20982/1000 were rounded to 20 seconds after first tick. I replace Matho.floor by Math.ceil and the problem is solved.

**The problem is solved in the same way, after I replaced Math.floor with Meth.ceil in the line 187 in component.js file:

left = Math.ceil((this.breakpoint - now)/1000);**

I would fix the bug my myself in the repository but I am not familiar with the workflow how to create pull requests for bug fixings even enhancements or new component. If you extend your contribution guideline to a more detailed step by step guide, more developers with a bakcend background like me could conribute to the project.