Three solutions for sub-functions accessing external variables in JavaScript

Preface

When we write web pages, we will definitely often encounter the following situation:

<body>
  
<div class="btns-wrapper"></div>
  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var wrapper = $('.btns-wrapper');
for(var i = 0; i < 5; i++){
 var btn = $('<button>Button' + i + '</button>').appendTo(wrapper);
 btn.on('click', function(evt){
  console.log('Click the button: ' + i);
 });
}
</script>
  
</body>

The code is very simple, just create a few buttons on the page and define the button click events

But when we click the button, we find that the obtained serial number is always 5, which is the last value of i.

This is because the anonymous function used to define the click event refers to the same variable i.

Solution 1: Execute immediately

var wrapper = $('.btns-wrapper');
for(var i = 0; i < 5; i++){
 var btn = $('<button>Button' + i + '</button>').appendTo(wrapper);

 //Default method //btn.on('click', function(evt){
 // console.log('Click the button: ' + i);
 //});

 //Method 1: Execute immediately btn.on('click', (function(n){
  return function(evt){
   console.log('Click the button: ' + n);
  }
 })(i));

}

This approach is to create a separate anonymous function (closure) for each button directly when defining the event, and each function holds the correct i variable

Solution 2: Use jQuery event passing

var wrapper = $('.btns-wrapper');
for(var i = 0; i < 5; i++){
 var btn = $('<button>Button' + i + '</button>').appendTo(wrapper);

 //Default method //btn.on('click', function(evt){
 // console.log('Click the button: ' + i);
 //});

 //Method 2: Use JQuery event parameter btn.on('click', { i: i }, function(evt){
  console.log('Click the button: ' + evt.data.i);
 });

}

This method is much simpler. You can just use 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; i++){
 var btn = $('<button>Button' + i + '</button>').appendTo(wrapper);

 //Default method //btn.on('click', function(evt){
 // console.log('Click the button: ' + i);
 //});

 //Method 3: Using DOM's data attribute btn.data('i', i);
 btn.on('click', function(evt){
  console.log('Click the button:' + $(this).data('i'));
 });

}

This method is also very simple, but its disadvantage is that it is not possible to use the data attribute to define structured data.

Summarize

On the whole, if it is a jQuery environment, using event parameters to transfer variables is the simplest, and structured data can be passed.

Otherwise, it can only be done through immediate execution (closure).

This is the end of this article about how sub-functions in JavaScript access external variables. For more information about how sub-functions in JavaScript access external variables, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in: