Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you the relevant knowledge about how JS subfunctions access external variables. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article, and let's take a look at it.

How does the Js subfunction access external variables? Share three solutions. When we write web pages, we must often encounter the following situation:

Var wrapper = $('.btns-wrapper'); for (var I = 0; I

But when we click the button, we find that the sequence number we get is always 5, which is the last value of I.

This is because anonymous functions that define click events all refer to the same variable I

Solution 1: execute var wrapper = $('. Btns-wrapper') immediately; for (var I = 0; I < 5; iSum +) {var btn = $('button' + i+') .appendTo (wrapper); / / default method / / btn.on ('click', function (evt) {/ / console.log (' click button:'+ I); / /}) / / method 1: execute btn.on immediately ('click', (function (n) {return function (evt) {console.log (' Click the button:'+ n);}) (I);}

In this way, an independent anonymous function (closure) is created directly for each button when defining the event, and each function holds the correct I variable.

Solution 2: use the event of jquery to pass parameters var wrapper = $('. Btns-wrapper'); for (var I = 0; I < 5; iPlus +) {var btn = $('button' +') .appendTo (wrapper); / / default method / / btn.on ('click', function (evt) {/ / console.log (' click button:'+ I); / /})) / / method 2: use the event of JQuery to pass the parameter btn.on ('click', {I: I}, function (evt) {console.log (' click button:'+ evt.data.i);});}

This method is much simpler, directly using jquery to pass the parameter body to the anonymous function.

Solution 3: use the data attribute of dom var wrapper = $('. Btns-wrapper'); for (var I = 0; I < 5; iPrep +) {var btn = $('button' + I +') .appendTo (wrapper); / / default method / / btn.on ('click', function (evt) {/ / console.log (' click button:'+ I); / / method 3: take advantage of dom's data attribute btn.data ('iButton, I) Btn.on ('click', function (evt) {console.log (' Click the button:'+ $(this) .data ('i');});}

This approach is also simple, but the drawback is that it is impossible to use the data attribute to define structured data.

These are all the contents of the article "how JS subfunctions access external variables". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.