It may even be wrong to interpret two functions that are timed to function as thread-like, thinking that the function that will execute the call in a single time slice seems good and powerful, but it's not. The reality is that JavaScript is running in a single-threaded way in the browser's JavaScript engine, and settimeout and setinterval just inserts the code you're going to execute into a code queue that the JS engine maintains at a point in time you set. It is important to understand that inserting a code queue does not mean that your code will execute immediately. and settimeout and SetInterval are a little different.
let's talk about settimeout.
Copy Code code as follows:
function Click () {
Code Block1 ...
settimeout (function () {
Process ...
}, 200);
Code BLOCK2
}
Suppose we bind this method to a button's OnClick event, and when we press the button, we must first execute the BLOCK1 and then run to the settimeout place, SetTimeout will tell the browser, " 200ms I will insert a section of code to execute to your queue ", the browser certainly agreed (note that inserting the code does not mean to execute immediately), after the settimeout code is run, immediately followed by the Block2 code to start execution, here began to explain the problem, If the BLOCK2 code executes more than 200ms, what would be the result? Perhaps, as you have previously understood, it will be taken for granted that your process code will execute immediately at 200ms. The fact is that during Block2 execution (after 200ms) the process code is inserted into the code queue, but always waits for the click Method to finish before executing the process code snippet, from the code queue to see the process code is behind the click, Plus JS is a single-threaded way to execute, so it should be easy to understand. In another case, the Block2 code executes <200MS, settimeout inserts the process code into the code queue after 200ms, when the thread of execution may already be idle (idle), and the result is 200ms, The process code inserts the queue to execute immediately, let you feel after 200ms, then executes.
and look at setinterval.
There may be two problems here:
1. The time interval may be skipped
2. Time interval may < execution time of the code that is scheduled to be invoked
Copy Code code as follows:
function Click () {
Code Block1 ...
SetInterval (function () {
Process ...
}, 200);
Code BLOCK2
}
Like the above, we assume that by a click, the setinterval is triggered to implement the process code every other time period.
such as the onclick to 300ms execution, block1 code execution, at 5ms to execute setinterval, as a point of time, insert process Code at 205MS, click Code Smooth end, Process code start execution ( Equivalent to the timer code in the diagram, but the process codes also perform a longer period of time than the next insertion point of 405ms, so that the code queues insert a process code, and the process continues to execute, And more than 605ms this insertion point, the following problem, you may also think that the code queue will continue to insert a process code ... The real situation is that because the code queue already has an unfinished process code, so 605ms this insertion time point will be "ruthless" skipped, because the JS engine only allowed to have an incomplete process code, said here do not know if you will be suddenly enlightened ...
In this case, you can use a better code form
Copy Code code as follows:
settimeout (function () {
Processing
SetTimeout (Arguments.callee, interval);
}, Interval);
This estimate a little bit, understand the benefits, so that there will be no time to skip the problem of the content is here, hope to be helpful, maybe I express is not very clear if you feel that the basic good English can be directly to see
About advanced timers This section of content, personally think that this book is really good, whether it is to learn from the zero, or weekdays nothing to turn over reference references are very good, the author is a Yahoo very cattle front-end development engineer:)
