Impact of loop closure and Its Solution

Last time, I have talked about how closures are formed and how they are used. But the traps produced by loop closures are included in the solution (none at all )! In the spirit of being honest, we are forced to repeat it. But in any case,Variables (instead of copies) are always referenced in the closure until they are disconnected and no reference is made. The closure in the memory can be released.So when we know this, we can start our journey today.

The last example was not good enough to operate the Dom. This time we use the setTimeout function for a more intuitive way.

Show Code!

This time, the timer setTimeout is used. Everyone knows that all the timer functions are executed by the callback function. Even if the latency is 0 seconds, the referenced I value is output after the loop is completed, therefore, 3 is always output. Of course, today's focus is on how to avoid this situation and its principles. In fact, we only need to make a very small change to our code. The principle isTo pass in the correct iteration value as a parameter.

Okay. Let's look at the code.

Here we use the previously mentioned method to manually create a closure. Enclose an anonymous function outside the callback function and use the cyclic I value as the parameter. The setTimeout Function references the index parameter of the anonymous function to form a closure. But the key is that there are three closures here, so the correct answer will not be affected at the end.

However, isn't this writing a little disgusting ?! We don't have to worry about it. As I mentioned in the previous closure, using an auxiliary function is a little simplified, but the principle is the same.

From these two examples, we can clearly see that the callback function does not directly reference cyclic variables, but references the parameters of the new parent function (wrapped function. In this way, we can avoid the closure trap caused by loops. Of course, I finally made a big move, the ecmascript5 method,Foreach!

Let's take a brief look at foreach (96 pages of JavaScript advanced programming, with a detailed explanation ). Foreach can receive two parameters: one is the function to be executed cyclically, and the other is the object that specifies the function to be executed to change the value of this (optional parameter ). Of course, the focus is on the first parameter, that is, the function to execute the loop. It will be passed in three parameters, the current value item, in the array Position Index and array object itself.

In foreach, one of the parameters is the current position index. I will tell you how to use it with confidence! Check the code!

Clean and easy! Even the for loop is available. This method allows us to avoid the need to manually create a closure. It is very cool!

However, two points must be emphasized:

1, this method is not used in antique browser (IE6-8), but we can expand in the prototype array!

2. This method is only a method of array objects. It cannot be used directly for array objects (such as the stream of nodelist), but we can use array. Prototype. foreach. Call !!

If you are not very familiar with the role of call, you can check out my other blog!

 

Forgive me. At, I haven't eaten yet. I have to finish sending this blog for dinner ~!

 

Impact of loop closure and Its Solution