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

N ways to align the last row of lists in CSS flex layout to the left (summary)

I would like to quote an article by Zhang Xinxu a...

Detailed explanation of the role and working principle of MySQL master-slave replication

1. What is master-slave replication? Master-slave...

Project practice of deploying Docker containers using Portainer

Table of contents 1. Background 2. Operation step...

Introduction to container of() function in Linux kernel programming

Preface In Linux kernel programming, you will oft...

Implementation code of jquery step progress axis plug-in

A jQuery plugin every day - step progress axis st...

Linux command line operation Baidu cloud upload and download files

Table of contents 0. Background 1. Installation 2...

Basic reference types of JavaScript advanced programming

Table of contents 1. Date 2. RegExp 3. Original p...

Detailed explanation of the use of HTML canvas and page storage technology in JavaScript

Table of contents 1. JavaScript uses canvas in HT...

Teach you a trick to achieve text comparison in Linux

Preface In the process of writing code, we will i...

Detailed explanation of the background-position percentage principle

When I was helping someone adjust the code today,...

JS implements the rock-paper-scissors game

This article example shares the specific code of ...

JavaScript method to delete or extract specified characters from a string (very commonly used)

Table of contents 1. substring() 2. substr() 3.in...

Delete the image operation of none in docker images

Since I usually use the docker build command to g...

How to configure the Runner container in Docker

1. Create a runner container mk@mk-pc:~/Desktop$ ...

MYSQL's 10 classic optimization cases and scenarios

Table of contents 1. General steps for SQL optimi...