How to solve the for loop closure problem in JS

In this article, we will share with you two methods on how to solve the for loop closure problem in JS. We hope it can help you.

With a code snippet like this, beginners will take it for granted that clicking Li in sequence will pop up the corresponding 0, 1, 2, 3, 4, 5, but The actual result is like this

No matter which button we click, the last thing that pops up is 6. This is the classic for loop closure problem.

So, first let us understand what a closure is. Baidu Encyclopedia explains it this way: a closure is a block of code that can contain free (not bound to a specific object) variables; these variables are not in this are defined within a code block or in any global context, but are defined in the environment in which the code block is defined (local variables). The word "closure" comes from the combination of a block of code to be executed (because the free variables are contained within the block, these free variables and the objects they refer to are not released) and the binding provided for the free variables. Computing environment (scope). Support for closures to varying degrees can be found in languages ​​such as Scala, Scheme, Common Lisp, Smalltalk, Groovy, JavaScript, Ruby, Python, Lua, objective c, and Java (Java8 and above).

My simple understanding is: a function is nested within another function, and a function inside needs to access the variables of the outer function, so a closure is formed. The closure is to retain a certain function. exists for the values ​​of some local variables.

However, there are some common closure problems in JavaScript, such as the above example, so let’s take a look at how to solve these problems.

Solution 1: Add a layer of closure, i is passed to the inner function in the form of a function parameter:

The result is that clicking the corresponding li will pop up The corresponding number, for example, click the third li, the following effect will appear:

Solution 2: Find an attribute to save the i value, and then pop up the value

Click the third li, the following effect will appear:

##Related recommendations:

JavaScript for loop if judgment statement detailed explanation

The usage of for-in loop and for loop traversing array

for loop in javascript Precautions when using

The above is the detailed content of How to solve the for loop closure problem in JS. For more information, please follow other related articles on the PHP Chinese website!