JavaScript loop out of control solution

Javascript makes it easier to control webpages on the client. it also brings about many problems. script out of control is one of the biggest headaches. javascript makes it easier to control webpages on the client. it also brings about many problems. script out of control is one of the biggest headaches.

One of the main reasons for the script to get out of control is that too many operations are executed in the loop.

There are two reasons for the loop to get out of control: one is too many cyclic operations, and the other is too many cycles.

The trick to solve this problem is to evaluate each loop using the following two problems:

Must this loop be executed synchronously?
Must the data in the loop be executed in order?
If the answer to both questions is no, you can choose to break down the operations in the loop. The key is to determine the answers to the above two questions based on the specific environment of the Code. A typical loop may look like the following:

For (var I = 0; I <items. length; I ++ ){
Process (items [I]);
}

At first glance, there is not much problem with this loop. Whether it will run for a long time depends entirely on the number of cycles. If no other code is dependent on the result of the loop immediately after the loop, the answer to the first question is "no ". You can also find that the loop processes only one value at a time and does not rely on the results of the previous loop. Therefore, the answer to the second question is also negative. This means that the loop can be disassembled in some way, without the prompt that the script is out of control when the browser is locked.

In the Professional JavaScript, Second Edition book, I recommend the following methods to handle the illusory tasks that are frequently executed:

Function chunk (array, process, context ){
SetTimeout (function (){
Var item = array. shift ();
Process. call (context, item );

If (array. length> 0 ){
SetTimeout (arguments. callee, 100 );
}
},100 );
}

The purpose of the chunk () function is to divide an array into small pieces for processing (this is also the origin of the name). We can pass three parameters. The array object to be processed, the processing function, and an optional context variable are used to set the this object corresponding to the process () function. The first timer is used to process the latency between operations (set to 100 ms here, you can modify it as needed ). Every time you execute this function, the first object in the array will be taken out and passed to the process () function for operation. If there are still unfinished objects in process, another timer will be started for repeated waits. The preceding loop can be used in the following method:

Chunk (items, process );

It should be noted that the array here adopts the queue format, and changes will occur each time during the loop process. If you want to modify the original status of the array, we will introduce two ways: one is to create a copy of the current array before passing through the concat () function:

Chunk (items. concat (), process );

Another option is to directly modify the chunk () function and directly modify it within the function:

Function chunk (array, process, context ){
Var items = array. concat (); // clone the array
SetTimeout (function (){
Var item = items. shift ();
Process. call (context, item );

If (items. length> 0 ){
SetTimeout (arguments. callee, 100 );
}
},100 );
}

Note that this method is much safer than saving only one index, because the content of the array may change before the next timer takes effect.

The chunk () function mentioned here is only a starting point for optimizing the cyclic performance. You can constantly improve it as needed to provide more features. For example, after all objects in the array are processed, you can add a function callback. Whether or not you will modify the function in this way, this is just a JavaScript code development mode that can help optimize the processing performance of the array, but also avoid the warning that the script is out of control.

The above is the solution to JavaScript loop out of control. For more related articles, please follow the PHP Chinese Network (www.php1.cn )!