An in-depth exploration of javascript timers_javascript skills-JS Tutorial-php.cn

An in-depth exploration of javascript timers_javascript skills

WBOY

Release： 2016-05-16 16:22:40

Original

1310 people have browsed it

javascript single thread

JavaScript’s single thread is related to its purpose. As a browser scripting language, JavaScript's main purpose is to interact with users and manipulate the DOM. This determines that it can only be single-threaded, otherwise it will cause very complex synchronization problems. For example, suppose JavaScript has two threads at the same time. One thread adds content to a certain DOM node, and the other thread deletes the node. In this case, which thread should the browser use? Therefore, in order to avoid complexity, JavaScript has been single-threaded since its birth. This has become a core feature of the language and will not change in the future.

Queue tasks

Single thread means that all tasks need to be queued, and the next task will not be executed until the previous task is completed. If the previous task takes a long time, the next task will have to wait.

Asynchronous event-driven

Many behaviors in the browser are asynchronous (Asynchronized), such as: mouse click events, window size drag events, timer trigger events, XMLHttpRequest completion callbacks, etc. When an asynchronous event occurs, it enters the event queue. The browser has a large internal message loop, the Event Loop, that polls a large event queue and processes events. For example, the browser is currently busy processing the onclick event. At this time, another event occurs (such as window onSize). This asynchronous event is put into the event queue to wait for processing. This will only be executed when the previous processing is completed and it is free. event.

Event Loop

JavaScript is single-threaded, but the browser is not single-threaded

The browser will have at least some of the following processes

1. Browser GUI rendering thread

2.JavaScript engine thread

3. Browser scheduled trigger thread

4. Browser event trigger thread

5. Browser http asynchronous request thread

Because the JavaScript engine is single-threaded, the code is first pushed into the queue and then run by the engine in a first-in, first-out manner. Event processing functions and timer execution functions will also be queued in this queue, and then an infinite loop will be used to continuously take out functions from the head of the queue for execution. This is the Event Loop.

To summarize, js is single-threaded, but browsers are multi-threaded. When encountering asynchronous things, the browser puts asynchronous callbacks into the Event Loop. When the js thread is not busy, go to Read Event Loop

Timer principle

Usage of timer

setTimeout(fn, delay)

setInterval(fn, delay)

fn is a function or a string, delay is the delay time, the unit is milliseconds

There are following things to note

1.fn can be a string, but it is never recommended to use it this way

2. If the function in.fn has this, this will point to the window when executed

If you understand js single thread and event loop, the principle of timer is also easy to understand

If a timer is set, when the delay time is reached, the browser will put the delayed execution event into the Event loop. When the time is up, it will be executed if the js thread is idle (so the accuracy of the timer is not accurate)

I read an article introducing the difference between setTimeout and setInterval in polling functions all the time. The code is as follows

Copy code The code is as follows:

setTimeout(function(){

                 setTimeout(arguments.callee,100)                                                                           
},100)

setInterval(function(){},1000)

The general meaning of the article is that setTimeout starts the next timer after the callback function is executed, so it must be executed at intervals, while setInterval is always executed. If it encounters a js thread and continues to execute, it may be Add multiple callbacks to the Event loop. When the js thread is not busy, multiple

will be executed at once.

After testing, it was found that no matter under ie, ff, chrome, Opera, Safari, setInterval is set at a certain interval

The test code is as follows

Copy code The code is as follows:

setInterval(function(){
xx.innerHTML=xx.innerHTML 1;
},100);

for(var i=0;i<6000000;i ){
xx.offsetWidth
}

setTimeout(function(){
debugger;
},10)

At the breakpoint, only one 1 was printed

Timer accuracy problem

Because js is single-threaded, if it is busy, the timer will definitely be inaccurate, and it will definitely get longer and longer. There seems to be no solution to this, no solution

Another precision issue is the minimum interval setTimeout(fun,0)

When the js thread is not busy, it cannot be executed immediately after 0 seconds. There is always a minimum interval, and each browser is different. This has not been tested

I read an article that mentioned the w3c standard. The minimum execution time of the timer is 4ms. I can’t find the source and can’t verify it! ! !

Some optimizations related to timers

There can still be some optimizations when making timers

1. For example, if window.onresize is bound, it will be triggered very frequently when the browser is zoomed, so the execution can be delayed, and cleared when the next execution occurs to reduce frequent execution

The pseudo code is as follows

Copy code The code is as follows:

var timer;

Function r(){

          clearTimeout(timer);

        timer = setTimeout(function(){

                      //do something

         },150);                                                
}

2. When the scroll bar is pulled down, there should also be a timer for lazyloading of pictures to avoid excessive calculations

3. When there are multiple places that need timers, they can be combined into one timer. The time interval is based on the smallest one. Then the callback function that needs to be executed is inserted into the array. When the time interval is reached, the array is traversed. Just execute it

A small demo

Copy code The code is as follows:

小伙伴们是否对javascript定时器有所了解了呢，如有疑问给我留言吧。