All web developers will have the need to upload images in batches. I believe everyone will have this problem. After selecting the image to be uploaded and submitting it to the server, the size of an image exceeds the permitted range. In my previous post (translation), I talked about the situations in which various browsers will bring up a script out of control prompt. for Internet Explorer, when the Browser executes a large number of statements, it stops executing the script. When other browsers continuously execute the script for more than a certain period of time, a prompt is displayed. The core issue we want to discuss is not how these browsers can make scripts run faster if they detect out-of-control scripts, so as to avoid these warnings.
The script is out of control for the following reasons:
Too many operations are executed in the loop.
Bloated function body
Excessive Recursion
Too many DOM calls
In this post, I will focus on the first article: excessive operations in the loop. Loop operations are performed synchronously. Therefore, the time taken to execute a loop depends entirely on the number of cycles. Therefore, two cases may cause loop execution to take too long and direct locking of the browser. First, the loop body contains too many operations, and second, there are too many cycles. Both cases can directly cause the browser to be locked and prompt that the script is out of control.
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:
The Code is as follows:
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:
The Code is as follows:
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:
The Code is as follows:
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.
