0

Please see the following JavaScript code:

var cis_current_time = 0;

setInterval(function() {
    cis_current_time += 1;
},1);

$("#timingInfo").html(cis_current_time);
setTimeout(function() {
    $("#timingInfo").html($("#timingInfo").html() + ', ' + cis_current_time);
},1000);

As a result I except to get 0, 1000, but it returns 0, number near 200

Please check a fiddle.

What is the reason of such behavior?

4
  • setInterval is not precise Commented Jul 6, 2015 at 14:27
  • Already answered before. setTimeout and setInterval have a minimal precision of 4~5 ms I believe (because it actually says "after the current functions, in approximately n milliseconds"), so you won't get it to run each millisecond. It has already been shown on SO, but where... Commented Jul 6, 2015 at 14:28
  • 1
    as well as being imprecise, they are only guaranteed minimums. They really mean "run this code [repeatedly] sometime after x milliseconds" Commented Jul 6, 2015 at 14:28
  • 3
    You can't guarantee they will be called regularly at all, no. If someone moves to another tab, browsers can and do throttle calls to setInterval callbacks. If you need to do things based on time passing, you need to use Date objects or window.performance.now(), recording the interval since your callback was last called. Commented Jul 6, 2015 at 14:32

2 Answers 2

1

setInterval and setTimeout may not be precise due to their design.

They are executed by the browser engine, which means the browser can throttle them in some cases. Just for an example, if your browser just uses one process for the JavaScript, they can be throttled or maybe elapse more ticks than you define, due to current pressure on your used core.

It can be improved a bit by using a multithreaded JavaScript, but anyway - they won't be 100% accurate.

setInterval only guarantees a new execution/call after the given time period. Not at the exact time. There may be differences each interval at all.

Sign up to request clarification or add additional context in comments.

Comments

0

setInterval function is very precise, as you can see on this fiddle.

Problem is in your code, you are trying to execute a function each milliseconds.

setInterval(function() {
    cis_current_time += 1;
},1);

JavaScript is monothreaded, then, when it has a lot of instructions, it stacks them and call them when it has the possibility, so, that's why it is not precise in your case.

setInterval is not the problem, JavaScript is : JS executes functions when it can, that's why it is executed later... Every function is concerned by this problem, so setInterval too...

Func(1) taking 70ms :

enter image description here

If Func(1) is taking 130ms :

enter image description here

setInterval is precise but has the same problem than each function in JS.

Image credits

11 Comments

Try switching to another tab as soon as you run that fiddle, then switch back. It is in no way precise.
Yes here is an example output: 30s 990ms, 32s 539m 1,5 Seconds difference!
setInterval is not the problem, JavaScript is : it executes functions when it can, that's why it is executed later... Every function is concerned by this problem, so setInterval too... setInterval makes well its job when JavaScript is running usually ^^ That is what I'm thinking
In this case, setInterval is the problem. If you're using a machine where calling a function that increments a variable takes longer than 1 millisecond... well, I'd be very surprised.
Well, you are going to be surprised by this ^^ : image If you want to try : jsfiddle (Click on "Run" multiple times and see your console)
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.