The precision usage of settimeout in JS

Source: Internet
Author: User
Tags current time setinterval

A few days ago just sent a use of settimeout to improve the UI response speed of the article, originally felt that the understanding of the settimeout has been deep enough, but yesterday accidentally heard that SetTimeout actually has a "bug": in settimeout 0 o'clock, Can not be accurate timing, also said that IE will have a 16ms delay
Although it has long been thought of JS this thing timing will not be very accurate, and this delay to "improve UI response speed," The impact is not small, but if it is to do animation, the impact may be relatively large, but also said that time to write a small program to try the

  code is as follows copy code
//time length
var Out_time = 0;
//Cycles
var loop_count =
$ (function () {
  $ (' A#start '). Click (function () {
     var t1 = MST ();
    loopout (loop_count, T1);
 });
});
//Recursive loop
function loopout (i, T1) {
  if (-i > 0) {
 settimeout (function () {
   loo Pout (i, T1);
 }, Out_time);
 }else{
    var t2 = MST ();
    alert (T2-T1);
 }
}
// Returns the number of milliseconds for the current point in time
function mst () {
  return new Date (). GetTime ();
}

The above procedure, when clicked "Start" button, first will take the current time T1, then calls the Loopout, when the circular parameter i is greater than 0 o'clock, will pass the settimeout timing 0ms recursive call loopout, simultaneously I will reduce 1, forms the cyclic termination condition, puts the circulation 100 times, Take the current time again, subtract from the T1, which is 100 of this settimeout cycle
Test results found that "IE will have a 16ms delay", this is not wrong, IE7, 8, the final return value is probably 1530~1550, calculate up, a settimeout probably to delay dt=15.4ms
And Chrome/safari/firefox, the return value is probably 420~430, or dt=4.2ms

When increasing the timing length out_time, the actual timing length will be effective only when the DT is enlarged to the browser, i.e. DT can be regarded as "minimum timing length"
But even if the timing length is more than DT timing is not accurate, not IE is probably 0.2ms,ie is a bit outrageous, such as out_time=50, the average length of time is about 60ms, the difference is 10ms (despise)

To sum up, although settimeout passed in the time value is milliseconds, but is not accurate, if the accuracy requirements, it is best to calculate the error of the browser

Two other scenarios are discussed below

1. Since settimeout has this problem, is there a problem with the setinterval similar to it?
The above "Loopout" method slightly improved, you can setinterval:

The code is as follows Copy Code
function Loopout (i, T1) {
var si = setinterval (function () {
if (I. = = Out_time) {
var t2 = MST ();
alert (T2-T1);
Clearinterval (SI);
}
}, Out_time);
}

This is, IE again phenotype of its distinction: when out_time=0, the SetInterval callback method will only execute once, only out_time>0, this script in IE can not perform properly
In addition, the performance of SetInterval and front settimeout is basically the same

2. Is the Node.js settimeout accurate?
Remove the code from the click section above and modify it so that the code can be executed in node, but in order to eliminate the impact of code initialization, there is another settimeout that is executed after the program initializes 100ms

The code is as follows Copy Code
settimeout (function () {
var t1 = MST ();
Loopout (Loop_count, T1);
}, 100);

Test results found that the server-side script relative to the efficiency of the browser is really high, in the cycle of 100 times, node.js settimeout 0ms delay around 0.1ms, when the cycle of 100000 increase, the average delay to 0.01ms

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.