Problem with running stopwatch on Wolfram Cloud

Question

I made a stopwatch that changes in real time.

Manipulate[Framed[Style[Dynamic@time, Bold, Black, 14],ImageSize -> {100, 50},
           Alignment -> Center],{{time, 3.14159, Style["", 12]}, 0, 4, 0.00001, 
           Animator,AnimationRunning -> False, AnimationRepetitions -> 1, 
           AnimationRate -> 1, DisplayAllSteps -> False, 
           AppearanceElements -> {"PlayPauseButton", "ResetButton"}} , 
           FrameMargins -> 25, AppearanceElements -> None] 

It works very well as a Notebook or CDF file. However, if you publish it to Wolfram Cloud, it will stop or slow down unlike real time.

Wolfram Cloud Page for STOPWATCH

How to make a stopwatch that can also be measured in real time on Wolfram Cloud? If it is impossible, it is also good to connect it in other ways, such as JavaScript. (However, I have to make a stopwatch up to 1/100000 seconds.)

Answer 1

Here is something that might work. I know posting answers that might not be fully correct is against the guidelines, but being in a similar situation I found comforting to recived at least a hint of what I had to do.

I would add this code in Mathematica:

Hyperlink["JavaScript Stopwatch", "your/path/to/the/js/file/stopwatch.js"]

Button["Start Stopwatch", RunThrough["your/path/to/the/js/file/stopwatch.js", {"start"}], Method -> "Queued"]

Button["Stop Stopwatch", RunThrough["your/path/to/the/js/file/stopwatch.js", {"stop"}], Method -> "Queued"]

Dynamic[Refresh[Import["your/path/to/the/js/file/stopwatch.js", "String"], UpdateInterval -> 0.01]]

And this code in a separate .js file. To run and edit it, just use any code editor (I use VS Code) and execute it.

Edit: to execute raw JS code you would need a plug-in(runtime environment) called node.js. Just google how to install that, on mac you would simply type brew install node assuming brew is installed (if not install it from the web link or pull it from github using git clone)

var startTime, stopTime;

function startStopwatch() {
  startTime = performance.now();
  stopTime = 0;
}

function stopStopwatch() {
  if (startTime !== undefined) {
    stopTime = performance.now();
  }
}

function getTime() {
  var elapsed = (stopTime || performance.now()) - startTime;
  return elapsed.toFixed(5);
}

function exportTime() {
  return getTime();
}

if (typeof global !== 'undefined') {
  global.start = startStopwatch;
  global.stop = stopStopwatch;
  global.export = exportTime;
}

Please keep in mind that when I said the answer might not be fully correct is because I am not fluent in JavaScript.

Remember to adjust the file paths in both code blocks to match your specific setup. By saving the Mathematica code in a notebook and the JavaScript code in a separate file (like stopwatch.js for instance, just note that .js extension is necessary), you can publish the notebook to the Wolfram Cloud, and the stopwatch should work with high precision timing.

I hope this helps and let me know if you have any questions.