Solving the problem of runaway JavaScript loop

Javascript brings convenient control to web pages on the client side. It also brings many problems. Among them, out-of-control scripts are one of the most troublesome problems.

One of the main reasons for out-of-control scripts is that there are too many executions in the loop There are two reasons why the operation

loops are out of control. One is too many loop operations, and the other is too many loops.

The trick to solve this problem is to use the following two questions to evaluate each loop:

This Does the loop have to be executed synchronously?
Does the data in the loop have to be executed in order?
If the answer to both questions is no, you can choose to decompose the operations in the loop. The key is to determine the answers to the above two questions based on the specific context of your code. A typical loop might look like this:

for(var i=0; i < items.length; i++){
process(items[i]);
}

At first glance, this loop doesn’t look too complicated. The big problem is whether it will run for a long time or not entirely depends on the number of loops. If there is no other code that depends on the result of the loop when executed immediately after the loop, then the answer to the first question is "no". You can also find that the loop only processes one value at a time and does not depend on the result of the previous loop, so the answer to the second question is also no. This means that the loop can be broken down in a way that doesn't cause the browser to lock up and display a message that the script is out of control.

In the book "Professional JavaScript, Second Edition", I recommend using the following method to deal with illusions that have a very large number of executions:

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 chunks (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 used to set the corresponding this object in the process() function. The first timer is used to handle the delay between operations (here set to 100 milliseconds, you can modify it according to actual needs). Every time this function is executed, the first object in the array will be taken out and passed to the process() function for operation. If there are still unprocessed objects in process() at this time, another timer will be started. Use Waiting repeatedly. The loop mentioned above can use this function in the following method:

chunk(items, process);

It should be noted that the array here takes the form of a queue, and during the loop, Modifications happen every time. If you want to modify the original state of the array, here are two ways: one is to use the concat() function to create a copy of the current array before passing it:

chunk(items.concat(), process);

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

function chunk(array, process, context){
var items = array.concat(); //clone the array
setTimeout(function () () {
var item = items.shift ();
proces.call (context, item);

if (items.length & gt; 0) {
Settimeout (Arguments.callee, 100);
}
}, 100);
}

Note that this method is much safer than just saving an index, because the contents of the array may change before the next timer takes effect.

The chunk() function mentioned here is just a starting point for optimizing loop performance. You can keep improving it to have more features as needed. For example, after all objects in the array have been processed, a function callback can be added. Regardless of whether you will modify the function in this way, this is just a JavaScript code development model that can help optimize array processing performance and avoid the warning that the script is out of control.

The above is the solution to the problem of out-of-control JavaScript loops. For more related articles, please pay attention to the PHP Chinese website (www.php.cn)!