Three solutions for sub-functions accessing external variables in JavaScript

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:
  • An article teaches you JS function inheritance
  • What is the length of a function in js?
  • JavaScript Basics Series: Functions and Methods
  • Use of JavaScript sleep function
  • Exception handling of built-in functions json_encode and json_decode in php
  • How to make your JavaScript functions more elegant
  • Summary of 50+ Utility Functions in JavaScript
  • In-depth understanding of JavaScript callback functions
  • JavaScript functional programming basics

<<:  How to implement scheduled backup of MySQL database

>>:  The use of mysql unique key in query and related issues

Recommend

MySQL intercepts the sql statement of the string function

1. left(name,4) intercepts the 4 characters on th...

Comparing Node.js and Deno

Table of contents Preface What is Deno? Compariso...

How to delete extra kernels in Ubuntu

Step 1: View the current kernel rew $ uname -a Li...

jQuery uses hide() and toggle() functions to realize the camera brand display hiding function

Recently, when I was learning jQuery, I came acro...

How to implement the builder pattern in Javascript

Overview The builder pattern is a relatively simp...

How to deploy egg applications on self-built Windows servers (with pictures and text)

1. Log in to VPN using IE browser 2. Remote login...

JavaScript prototype and prototype chain details

Table of contents 1. prototype (explicit prototyp...

How to add a disk in Vmware: Expand the disk

This article describes how to add or expand a dis...

Information transmission and function calls between WeChat mini program pages and components

In this article, I will explain the relevant cont...

MySQL 8.0.19 supports locking an account after entering an incorrect password three times (example)

MySQL 8.0.19 supports locking the account after e...

Web standards learning to understand the separation of structure and presentation

When discussing Web standards, one thing that alwa...

Markup Language - Anchor

Previous: Markup Language - Phrase Elements Origin...

How to recover data after accidentally deleting ibdata files in mysql5.7.33

Table of contents 1. Scenario description: 2. Cas...

SQL Server Comment Shortcut Key Operation

Batch comments in SQL Server Batch Annotation Ctr...

Vue implements bottom query function

This article example shares the specific code of ...