Avoid false dead or cpu100 % caused by js Infinite Loop

The content of this article is very simple, just a review of an unclear question encountered during the interview. as it was the first time I posted a document on cnblog, I installed the protection shield, do not throw bricks, kitchen knives, or other items in any way ....

Today, I went to a well-known company in China for an interview. I took a job as a front-end developer. The first time I went to a big company for an interview, I felt a lot of feelings, and I felt that I could make up for it later, there are no technical problems in the whole process, which may be related to the company's product direction (In addition, the company is not focusing on web ).

During the second round of interviews, the product manager and I mentioned a problem with their products, which probably means that when a function of them displays data in an infinite loop on the page, CPU, 100%. At that time, the product manager just showed me a little demonstration, because at that time I was thinking about why I didn't appear when I used JS to simulate multithreading, therefore, I did not pay attention to the relevant information he said, and I only looked at the interface. At that time, I only proposed to use setTimeout or setInterval to avoid this problem, however, the last time I used a multi-threaded Demo was too long and a bit vague, and I was not sure about it. So when I went home, I quickly pulled out the previous Code and sorted out the answer, as shown below:

The code is simple, so I am too lazy to write comments. The following are the number of loops and the two functions for setting DIV innerHTML.

Reference content is as follows: Function $ (id ){ Return document. getElementById (id ); } Var setter = function (){ Var ele = $ ("containder "); Return function (count ){ Ele. innerHTML = count; } }(); Var counter = function (){ Var count = 0; Return function (){ Count ++; Setter (count ); }; }();

It is estimated that no one will use it like Test 1, and the browser will be stuck.

Test1:

Reference content is as follows: <Script type = "text/javascript"> (Function (){ While (1 ){ Counter (); } }) (); </Script>

Test 2: using the setInterval method, the CPU usage and memory occupied by IE are very small. Generally, the CPU is between 0 and 2%, and the while loop can basically achieve the same effect. For this reason, the younger brother did not dare to guess and avoid misleading new people. I hope to explain how to understand the JS engine...

Test2:

Reference content is as follows: <Script type = "text/javascript"> (Function (){ Window. setInterval ("counter ();", 1 ); })(); </Script>

According to the interface like the product manager, the data is probably displayed. Some interfaces will automatically provide data, and the frontend call can process strings...

Complete Test3 code:

<Div id = "containder" style = "overflow: scroll;"> </div>

Reference content is as follows: <Script type = "text/javascript"> Function $ (id ){ Return document. getElementById (id ); } Var data = []; Var createdata = function (){ Data. push (+ new Date () + "|" + (+ new Date ())); }; Var setter = function (){ Var ele = $ ("containder "); Var list = []; Return function (text ){ If (! Text) Return; List. push (text ); If (list. length> 10) List. shift (); Ele. innerHTML = list. join ("<br/> "); } }(); Var counter = function (){ Var count = 0; Return function (){ Count ++; Setter (data. shift ()); }; }(); (Function (){ Window. setInterval ("createdata ();", 1 ); Window. setInterval ("counter ();", 1 ); }) (); </Script>

The second purpose of this article is to remind you of some basic operations.

The first time I made this thing, I felt very troublesome. I 'd like to test it first...

Author: a low-profile hacker

Source: http://www.cnblogs.com/zedJS