About the timer in Javascript

Recently I wrote some JS animations, which are commonly used in JS timers (setTimeout & set interval) to find relevant materials and share some experiences with you.

You can use the timer created by setTimeout & set interval to implement interesting and useful functions. Beginners may misunderstand JavaScript timers and think they are threads. In fact, JavaScript is running in a single thread, the timer is only scheduled to be executed at a certain time in the future, but the specific execution time cannot be guaranteed, because in the lifecycle of the page, there may be otherCodeIn the process of controlling JavaScript. The browser is only responsible for sorting and assigns a code to run at a certain time point.

The following describes the Javascript thread, indicating the Javascript process timeline.

In addition to the JavaScript Execution Process, there is also a code queue that needs to be executed in the next idle time of the process. As the page passes through its lifecycle, the code is added to the peer column in the execution order. For example, when a button is pressed, event processing is added to the queue and executed within the next possible time.

The timer works on the queue. When the specified time passes, the code is inserted. Note that adding to the queue does not mean that it will be executed immediately, but can only be said that it will be executed as soon as possible, set a timer to be executed after Ms. It does not mean that the timer will be executed immediately after Ms. It only means that the timer will be added to the queue after Ms. If the queue is idle at this time point, the code will be executed.

See the following code:

VaR BTN = document. getelementbyid ("mybtn"); BTN. onclick = function () {setTimeout (function () {document. getelementbyid ("message "). nodename = "mymessage"; // other codes}, 250 );}
 

Note that the specified time interval indicates when the timer code is added to the queue, rather than when the code is executed. For details about the process timeline processed by the onclick operator, refer:

SetTimeout (): Execute Code in a future; cleartimeout (): Cancel setTimeout ().

The following shows a simple timer with the stop function:

<SCRIPT type = "text/JavaScript"> var C = 0 var t function timedcount () {document. getelementbyid ('txt '). value = C + 1 T = setTimeout ("timedcount ()", 1000)} function stopcount () {cleartimeout (t )} </SCRIPT> <input type = "button" value = "start timing! "Onclick =" timedcount () "> <input type =" text "id =" TXT "> <input type =" button "value =" Stop timing! "Onclick =" stopcount () ">

The setinterval () method can call functions or computation expressions according to the specified period (in milliseconds.

The setinterval () method does not stop calling the function until clearinterval () is called or the window is closed. The id value returned by setinterval () can be used as a parameter of the clearinterval () method.

For the repeat timer, we can either use setTimeout to repeat the timer creation or use setinterval directly. The timer created using setinterval ensures that the timer is inserted into the queue in a regular way, the problem with this method is that the Code may not be executed until it is added to the queue again. It may be found that the timer is run several times, but there is no pause in the middle. However, the current JavaScript Engine is very smart, this problem can be avoided. When setinterval is used, the timer code is added to the queue only when no other code has a timer, this ensures that the time interval between the timer code and the queue is specified. Note that this is only the time interval between the timer code and the code execution, so there are two problems with setinterval: (1) Some intervals will be skipped (2) the code execution interval of multiple timers may be smaller than expected.

To avoid these problems, you can use the setTimeout chain in the following mode:

 
SetTimeout (function () {// setTimeout (arguments. callee, interval) in processing;}, interval)
 

In the timer demo above, this mode is also used for loop.