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

vue-router history mode server-side configuration process record

Three solutions for sub-functions accessing external variables in JavaScript

Preface

Solution 1: Execute immediately

Solution 2: Use jQuery event passing

Solution 3: Use the data attribute of DOM

Summarize

vue-router history mode server-side configuration process record

The problem of being unable to enter the management page when installing rabbitmq in docker

How to use vs2019 for Linux remote development

Detailed explanation of the getBoundingClientRect() method in js

Linux uses iftop to monitor network card traffic in real time

Encoding problems and solutions when mysql associates two tables

How to point the target link of a tag to iframe

WeChat applet Amap multi-point route planning process example detailed explanation

MySQL optimization strategy (recommended)

Detailed explanation of screen command usage in Linux

Recommend

Vue implements div wheel zooming in and out

Why can't I see the access interface for Docker Tomcat?

JavaScript to achieve the idea of snake game

Solution to the garbled problem of web pages when the encoding is set to utf-8

K3s Getting Started Guide - Detailed Tutorial on Running K3s in Docker

WeChat Mini Programs Achieve Seamless Scrolling

How to Dockerize a Python Django Application

22 Vue optimization tips (project practical)

Graphical analysis of MYSQL5.7 configuration file location in Windows environment

Example code and method of storing arrays in mysql

Vue uses OSS to upload pictures or attachments

Implementing carousel effects with JavaScript

MySQL index coverage example analysis

Detailed examples of float usage in HTML/CSS

Detailed explanation of how to solve the circular reference problem encountered when using JSON.stringify