I'm working on a Javascript stopwatch application, and it works in every browser but Chrome.
Here is a fiddle: http://jsfiddle.net/djwelsh/Sxyy8/
In theory it is very simple. Clicking the Start button records the epoch time in milliseconds, and starts a setInterval
. On each interval, that starting epoch time is subtracted from the current epoch time. This leaves us with a value in milliseconds, which is converted to h:m:s:cs
and displayed on the page.
The problem
My problem is with Chrome. Every time the timer reaches 10000 ms, the tab crashes with the "Aw, snap" message.
One bizarre aspect is that the crash still happens if you hit Stop, wait a few seconds, and then hit Start again. This would seem to indicate that it's a memory issue - something is filling up to the point where it cannot hold any more, and overflowing. But inspecting memory in both dev tools and the resource monitor shows nothing at all unusual.
Possible solutions
The problem can be averted by changing the interval value to a number larger than 100 ms (the default I want to use is 50). It can also be averted by logging the timer values in the console, for some reason.
The trouble is, unless I know why it is happening, I can't be confident that these quick-fixes are actually resolving the problem. I don't want to publish the page until I know it will work in all current browsers.
I know this seems like a fairly narrow-scope problem, but I'm hoping the solution will reveal something larger in scope that might help other people (an idiosyncrasy of Chrome's timer functions or something).
EDIT By the way, I know that stopping and restarting the timer doesn't work the way it ought to in a real stopwatch; I haven't finished implementing that part yet. I thought it would be better to keep it as simple as possible for SO.
For reference (and great justice), here is the updated version. Still crashes at 10000: http://jsfiddle.net/djwelsh/Sxyy8/7/
SOLUTION Based on the answer from @Akhlesh, I updated the fiddle. It now runs properly and acts like a stopwatch: http://jsfiddle.net/djwelsh/Sxyy8/18/
In case you're wondering, I need to use the epoch-based technique (as opposed to just incrementing a base value) because sometimes memory usage issues cause the interval not to be called every second - if the tab is moved to the background while the timer is still running, for example.
You can avoid crashing of tab by making time and now variable as global instead of creating those variable again n again inside Update function.
var uTime,uNow;
//Update function will use same variable to initialize time and now
updateTime: function () {
uNow = Date.now();
oO.milliseconds = uNow - oO.epoch;
uTime = oO.getTimeObject(oO.milliseconds);
oO.el.testClock.text('' + uTime.h + ':' + uTime.m + ':' + uTime.s + ':' + uTime.ms + '');
}
Fiddle Demo
I am not sure about the reason but i think GC is not able to deallocate those variable and same time it allocating new variable and that is causing crash.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With