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